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>

现在我想让它在Click上工作。我跟随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

在你的第二个小提琴中，你不再在按钮元素上调用.tooltip()。您必须调用该函数来检测工具提示。默认情况下，通过将鼠标悬停在按钮上来触发工具提示。您可以通过向options的调用提供.tooltip()对象来更改此设置。具体来说，您可以包含“触发器”选项。

Answer 2

您需要使用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>

Js代码

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

这是更新的小提琴 https://jsfiddle.net/c1rogqxw/5/

单击按钮显示工具提示

2 个答案: