Zeige Tooltip beim Klicken auf die Schaltfläche

Question

Ich habe derzeit den Tooltip für den Zugriff auf Hover. https://jsfiddle.net/lakenney/c1rogqxw/

<!-- Alert --> 
<button class="btn btn-xs btn-info gly-radius" data-toggle="tooltip" data-placement="bottom" data-original-title="Click any question mark icon to get help and tips with specific tasks" aria-describedby="tooltip"> 
    <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> 
    <span class="sr-only">Click any question mark icon to get help and tips with specific tasks</span> 
<!-- Alert --> 
</button> 

Jetzt möchte ich es auf Klicken Sie zur Arbeit kommen. Ich verfolge das Beispiel von Julien Vernet, außer dass ich das Accessibility Markup hinzugefügt habe. oh https://themeavenue.net/show-hide-element-onclick-using-boostrap-jquery/ ... und ich bin mit der Taste statt href

Das ist, was ich habe, so weit:

<button class="btn btn-xs btn-info gly-radius" data-toggle="tooltip" data-placement="bottom" data-original-title="Click any question mark icon to get help and tips with specific tasks" aria-describedby="tooltip"> 
    <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> 
    <span class="sr-only">Click any question mark icon to get help and tips with specific tasks</span> 
    <!-- Alert --> 
</button> 

$('[data-toggle="tooltip"]').click(function (event) { 
     event.preventDefault(); 
     var target = $(this).attr('href'); 
     $(target).toggleClass('hidden show'); 
}); 

https://jsfiddle.net/lakenney/c1rogqxw/4/

Answer 1

die "trigger" option zu Ihrem ursprünglichen Code hinzufügen:

$(function() { 
    $('[data-toggle="tooltip"]').tooltip({ trigger: 'click' }); 
}); 

jsfiddle

---

In Ihrer zweiten Geige rufen Sie nicht mehr auf dem Button-Element. Sie müssen diese Funktion aufrufen, um den Tooltip zu instrumentieren. Standardmäßig wird der Tooltip durch einen Mausklick auf die Schaltfläche ausgelöst. Sie können dies ändern, indem Sie dem Aufruf an .tooltip() ein options-Objekt bereitstellen. Insbesondere können Sie die Option "Trigger" einschließen.

Answer 2

Sie müssen popover tun statt Tooltip

<button class="btn btn-xs btn-info gly-radius" data-toggle="popover" data-placement="bottom" data-original-title="Click any question mark icon to get help and tips with specific tasks" data-content="Click any question mark icon to get help and tips with specific tasks" aria-describedby="tooltip"> 
    <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> 
    <span class="sr-only">Click any question mark icon to get help and tips with specific tasks</span> 
    <!-- Alert --> 
</button> 

Js Code

$('[data-toggle="popover"]').popover(); 

hier wird die aktualisierte Geige https://jsfiddle.net/c1rogqxw/5/