按钮单击和鼠标选项后,Bootstrap的工具提示不会消失

问题描述 投票:90回答:16

我有一个bootstrap工具提示的问题:当我点击一个按钮时,即使光标在按钮之外,工具提示也会保持不变。我查看了手册 - Bootstrap's tooltip,如果我点击按钮,我会看到同样的问题。有没有解决方法可以解决这个问题?刚尝试了最新的FF,IE。

javascript twitter-bootstrap tooltip
16个回答
187
投票

这是因为没有设置trigger。触发器的默认值是'hover focus',因此在单击按钮后工具提示保持可见,直到单击另一个按钮,因为按钮是focused

因此,您所要做的就是将trigger定义为'hover'。在单击按钮后链接到的同一示例下面没有持久化工具提示:

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

小提琴中的doc示例 - > http://jsfiddle.net/vdzvvg6o/


0
投票

这对我有用:

$(document).ready(function() {
   $('#save').tooltip({
            trigger : 'hover'
        }) ;

});

我正在动态地禁用保存按钮然后问题是。


0
投票

我解决此问题的方法是使用以下代码删除click事件函数中的工具提示:

$("#myButton").on("click", function() {
    $("div[role=tooltip]").remove();
});

0
投票

在文档就绪功能中使用此功能

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

0
投票

这个解决方案对我有用。

$('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');
});

fiddle

我尝试了之前答案中给出的大多数解决方案,但它们都没有为我工作。


0
投票

我的问题在于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'); }); }


0
投票

您还可以使用以下方法隐藏mouseleave上的工具提示,如下所示:

jQuery("body").on("mouseleave", ".has-tooltip", function(){
    jQuery(this).blur();
});

0
投票

在我的情况下,这是修复:

beforeDestroyingElement() {    
  $('[data-toggle="tooltip"]').tooltip('hide');
}

我没有从Bootstrap文档中遵守这条规则:

必须先隐藏工具提示,然后才能从DOM中删除相应的元素。


0
投票

工作方案

$(document).on("click",function()
    {
    setTimeout(function()
    {

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

},500);    // Hides tooltip in 500 milliseconds
    });

44
投票

我知道一年多了,但我无法在这里使用任何例子。我必须使用以下内容:

$('[rel="tooltip"]').on('click', function () {
    $(this).tooltip('hide')
})

这也会在悬停时再次显示工具提示。


8
投票

在我的情况下,该问题仅在Internet Explorer中重现:无论哪个元素(输入,div等...)都有工具提示 - 如果点击 - 工具提示仍然显示。

在网上发现了一些推荐.hide()的解决方案。元素上的工具提示点击事件 - 但这是个坏主意 - 徘徊在同一个元素上 - 让它隐藏起来...在我的情况下

$('.myToolTippedElement').on('click', function () {
    $(this).blur()
})

做了所有的魔术! - 其中.myToolTippedElement是有一个工具提示的元素...


8
投票

嗨,我没有解决这个问题。当其他解决方案不起作用时,请尝试以下方法:

$('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');
    });

这也是拖放的解决方案。所以我希望这有助于某人:)


2
投票

尝试使用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'});

这肯定会消除卡住的工具提示。


2
投票

大卫的上述答案有助于解决我的问题。我在按钮上都有悬停和点击事件。 MAC上的Firefox确实按照我的意愿行事。也就是说,悬停时显示工具提示,不显示点击工具提示。在其他浏览器和操作系统上,当我单击时,工具提示出现并保持显示状态。即使我将鼠标移动到其他按钮进行悬停。这就是我所拥有的:

$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true}); 

这是修复:

$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true, trigger: 'hover'}); 

1
投票

您还可以添加:

onclick="this.blur()"

1
投票

在角度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');
    });
   }

0
投票

我在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');
}
© www.soinside.com 2019 - 2024. All rights reserved.