【问题标题】:Bootstrap tooltip requiring double click after first click [duplicate]首次单击后需要双击的引导工具提示[重复]
【发布时间】:2016-03-25 18:03:24
【问题描述】:

我遇到了工具提示在单击一次后需要双击的问题。例如,我单击 tooltip1,然后单击 tooltip2,然后再次单击 tooltip1。我第二次单击 tooltip1 时,需要单击两次才能再次显示工具提示。

总的来说,我正在寻找一个包含 4 个工具提示的页面,当我单击链接时会显示工具提示,并且一次只显示一个工具提示,因此如果显示一个工具提示,则其他 3 个工具提示将被隐藏。

一个例子是https://jsfiddle.net/9656mv9w/

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

$(document).on('show.bs.tooltip', function() {
$('.tooltip').not(this).hide();
});

【问题讨论】:

  • 如果你阅读Bootstrap的源码,你会发现大部分popover代码都使用了tooltip代码。 (Popover 派生自 Tooltip 并进行了一些小的自定义。)因此两者的问题和解决方案是相同的。

标签: javascript twitter-bootstrap tooltip


【解决方案1】:

我遇到了同样的问题。一种解决方法是检测显示事件上应关闭的任何打开的工具提示,然后触发单击以关闭它们。

//init bootstrap tooltips
$('[data-toggle="tooltip"]').tooltip({
  trigger:'click'
});

//listen for the show event on any triggered elements
$('[data-toggle="tooltip"]').on('show.bs.tooltip', function() {

 //get a reference to the current element that is showing the tooltip
  var triggeredElement = $(this);

  //loop through all tooltips elements
  $('[data-toggle="tooltip"]').each(function(){

    //if they are not the currently triggered element and have a tooltip, 
    //trigger a click to close them
    if($(this) !== triggeredElement && $(this).next().hasClass('tooltip')) {
      $(this).click();
    }
  })
});

【讨论】:

  • 这非常有效。谢谢!
猜你喜欢
  • 2021-11-14
  • 1970-01-01
  • 2013-06-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-01-13
  • 1970-01-01
  • 2018-11-10
相关资源
最近更新 更多