Javascript 单击按钮时显示工具提示
我目前有可访问的鼠标悬停工具提示Javascript 单击按钮时显示工具提示,javascript,jquery,Javascript,Jquery,我目前有可访问的鼠标悬停工具提示 单击任何问号图标以获取有关特定任务的帮助和提示 现在我想让它在Click上工作。我遵循Julien Vernet的示例,只是添加了可访问性标记。 ... 哦,我用的是按钮而不是href 这就是我到目前为止所做的: <button class="btn btn-xs btn-info gly-radius" data-toggle="tooltip" data-placement="bottom" data-original-title="Click a
单击任何问号图标以获取有关特定任务的帮助和提示
现在我想让它在Click上工作。我遵循Julien Vernet的示例,只是添加了可访问性标记。
... 哦,我用的是按钮而不是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');
});
单击任何问号图标以获取有关特定任务的帮助和提示
$('[data toggle=“tooltip”]')。单击(函数(事件){
event.preventDefault();
var target=$(this.attr('href');
$(目标).toggleClass('hidden show');
});
将添加到原始代码中:
$(function () {
$('[data-toggle="tooltip"]').tooltip({ trigger: 'click' });
});
在第二把小提琴中,您不再对按钮元素调用
.tooltip()
。必须调用该函数才能插入工具提示。默认情况下,将鼠标悬停在按钮上会触发工具提示。您可以通过为调用.tooltip()
提供一个options
对象来改变这一点。具体地说,您可以包括“触发器”选项。您需要执行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>
这是最新的小提琴
提问时,请描述当前行为和/或错误以及所需行为。我不知道“触发器”。。。非常优雅!我注意到,如果不在工具提示内单击,它不会隐藏自己。有办法吗?
<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>
$('[data-toggle="popover"]').popover();