我有一个bootstrap工具提示的问题:当我点击一个按钮时,即使光标在按钮之外,工具提示也会保持不变。我查看了手册 - Bootstrap's tooltip,如果我点击按钮,我会看到同样的问题。有没有解决方法可以解决这个问题?刚尝试了最新的FF,IE。
这是因为没有设置trigger
。触发器的默认值是'hover focus'
,因此在单击按钮后工具提示保持可见,直到单击另一个按钮,因为按钮是focused
。
因此,您所要做的就是将trigger
定义为'hover'
。在单击按钮后链接到的同一示例下面没有持久化工具提示:
$('[data-toggle="tooltip"]').tooltip({
trigger : 'hover'
})
小提琴中的doc示例 - > http://jsfiddle.net/vdzvvg6o/
这对我有用:
$(document).ready(function() {
$('#save').tooltip({
trigger : 'hover'
}) ;
});
我正在动态地禁用保存按钮然后问题是。
我解决此问题的方法是使用以下代码删除click事件函数中的工具提示:
$("#myButton").on("click", function() {
$("div[role=tooltip]").remove();
});
在文档就绪功能中使用此功能
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({
trigger : 'hover'
});
});
这个解决方案对我有用。
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
trigger: 'click'
});
$('a[data-toggle="tooltip"]').click(function(event){
event.stopPropagation();
});
$('body').click(function(){
$('a[data-toggle="tooltip"]').tooltip('hide');
});
我尝试了之前答案中给出的大多数解决方案,但它们都没有为我工作。
我的问题在于DataTable。下面的代码适合我。
columnDefs: [
{
targets: 0, data: "id",
render: function (data, type, full, meta) {
return '<a href="javascript:;" class="btn btn-xs btn-default" data-toggle="tooltip" title="Pending" data-container="body"><i class="fa fa-check"></i></a>';
}
}
],
drawCallback: function() {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="tooltip"]').on('click', function () {
$(this).tooltip('hide');
});
}
您还可以使用以下方法隐藏mouseleave上的工具提示,如下所示:
jQuery("body").on("mouseleave", ".has-tooltip", function(){
jQuery(this).blur();
});
在我的情况下,这是修复:
beforeDestroyingElement() {
$('[data-toggle="tooltip"]').tooltip('hide');
}
我没有从Bootstrap文档中遵守这条规则:
必须先隐藏工具提示,然后才能从DOM中删除相应的元素。
工作方案
$(document).on("click",function()
{
setTimeout(function()
{
$('[data-toggle="tooltip"]').tooltip('hide');
},500); // Hides tooltip in 500 milliseconds
});
我知道一年多了,但我无法在这里使用任何例子。我必须使用以下内容:
$('[rel="tooltip"]').on('click', function () {
$(this).tooltip('hide')
})
这也会在悬停时再次显示工具提示。
在我的情况下,该问题仅在Internet Explorer中重现:无论哪个元素(输入,div等...)都有工具提示 - 如果点击 - 工具提示仍然显示。
在网上发现了一些推荐.hide()的解决方案。元素上的工具提示点击事件 - 但这是个坏主意 - 徘徊在同一个元素上 - 让它隐藏起来...在我的情况下
$('.myToolTippedElement').on('click', function () {
$(this).blur()
})
做了所有的魔术! - 其中.myToolTippedElement是有一个工具提示的元素...
嗨,我没有解决这个问题。当其他解决方案不起作用时,请尝试以下方法:
$('body').tooltip({
selector: '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])',
trigger: 'hover',
container: 'body'
}).on('click mousedown mouseup', '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])', function () {
$('[data-toggle="tooltip"], [title]:not([data-toggle="popover"])').tooltip('destroy');
});
这也是拖放的解决方案。所以我希望这有助于某人:)
尝试使用rel="tooltip"
而不是data-toggle="tooltip"
在我的情况下工作。我正在使用data-toggle="tooltip"
并将触发条件设置为悬停,这在我的情况下不起作用。当我更改数据选择器时,它工作正常。
HTML代码:
<button id="submit-btn" type="submit" class="btn btn-success" rel="tooltip" title="Click to submit this form">Submit</button>
JS Code // Tooltip $('。btn')。tooltip({trigger:'hover'});
这肯定会消除卡住的工具提示。
大卫的上述答案有助于解决我的问题。我在按钮上都有悬停和点击事件。 MAC上的Firefox确实按照我的意愿行事。也就是说,悬停时显示工具提示,不显示点击工具提示。在其他浏览器和操作系统上,当我单击时,工具提示出现并保持显示状态。即使我将鼠标移动到其他按钮进行悬停。这就是我所拥有的:
$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true});
这是修复:
$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true, trigger: 'hover'});
您还可以添加:
onclick="this.blur()"
在角度7与bootstrap 4和jquery我发现这个,它工作正常。我使用了dispose,因为它的破坏并没有隐藏工具提示。
ngAfterViewChecked() {
$('[data-toggle="tooltip"]').tooltip({
trigger: 'hover'
});
$('[data-toggle="tooltip"]').on('mouseleave', function () {
$(this).tooltip('dispose');
});
$('[data-toggle="tooltip"]').on('click', function () {
$(this).tooltip('dispose');
});
}
我在cycle.js中使用bootstrap工具提示,上面没有一个对我有效。
我不得不这样做:
return button( selector + '.btn.btn-sm',
{
hook: {
destroy: tooltipOff,
insert: toggleTooltipOn,
},
....
function toggleTooltipOn(vnode){
setupJQuery();
jQuery[0].$( vnode.elm )
.tooltip({container:'body', trigger: 'hover');
//container:body is to help tooltips not wiggle on hover
//trigger:hover is to only trigger on hover, not on click
}
function tooltipOff( vnode ){
setupJQuery();
jQuery[0].$( vnode.elm ).tooltip('hide');
}