ボタンのクリックでツールチップを表示

Question

現在、ホバー上で作業中のツールチップがあります。 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> 

今すぐクリックして作業します。私はアクセシビリティマークアップを追加した以外はJulien Vernetの例に従っています。 https://themeavenue.net/show-hide-element-onclick-using-boostrap-jquery/ ...ああ、私はこれは私がこれまでにしたものである代わりに、hrefの

のボタンを使用しています：

<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

があなたの元のコードに"trigger" optionを追加します。

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

jsfiddle

---

2番目のフィドルでは、もうボタン要素で.tooltip()を呼び出していません。ツールチップを計測するには、その関数を呼び出す必要があります。デフォルトでは、ボタンの上にカーソルを置くとツールヒントがトリガーされます。 .tooltip()への呼び出しにoptionsオブジェクトを指定すると、それを変更できます。具体的には、「トリガー」オプションを含めることができます。質問をするときに、JSコードここ

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

<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> 

代わりにツールチップのポップオーバーを実行する必要があり

Answer 2

が更新フィドル https://jsfiddle.net/c1rogqxw/5/