Question

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

Answer 1

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

所以你要做的就是将trigger定义为'hover'。在单击按钮后链接到的相同示例下方没有持久化工具提示：

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

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

Answer 2

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

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

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

Answer 3

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

在网上找到一些推荐.hide（）的解决方案，提示元素上的工具提示点击事件 - 但这是个坏主意 - 徘徊回同一个元素 - 让它隐藏起来...... 在我的情况下

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

取得了所有的魔力!!! - 其中.myToolTippedElement是具有工具提示的元素......

Answer 4

嗨，我对此问题的解决方案很少。当其他解决方案不起作用时，试试这个：

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

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

Answer 5

尝试使用rel="tooltip"代替data-toggle="tooltip"，而不是data-toggle="tooltip"。我正在使用<button id="submit-btn" type="submit" class="btn btn-success" rel="tooltip" title="Click to submit this form">Submit</button>并将触发条件设置为悬停，这在我的情况下不起作用。当我更改数据选择器时，它可以工作。

HTML代码：

EOF

JS代码 //工具提示 $（ 'BTN'）。提示（{ 触发器：'悬停' }）;

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

Answer 6

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

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

这是修复：

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

Answer 7

在HTML中添加以下内容也是可以实现的：

 data-trigger="hover"

 <button type="button" data-toggle="tooltip" data-placement="top" data-trigger="hover" title="To re-enable scanning, click here">Text</button>

Answer 8

您还可以添加：

override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {

    for touch: AnyObject in touches{

        let pointOfTouch = touch.location(in: self)
        let previousPointOfTouch = touch.previousLocation(in: self)

        let amountDragged = pointOfTouch.x - previousPointOfTouch.x

        if currentGameState == gameState.inGame{
        player.position.x += amountDragged
        }

        if player.position.x > gameArea.maxX - player.size.width/2{
            print("Ship turning Right") //Log print to check if it works
            player.texture = SKTexture(imageNamed: "playerShipRight")
            player.position.x = gameArea.maxX - player.size.width/2
        }

        if player.position.x < gameArea.minX + player.size.width/2{
            print("Ship turning Left") //Log print to check if it works
            player.texture = SKTexture(imageNamed: "playerShipLeft")
            player.position.x = gameArea.minX + player.size.width/2
        }
    }
}

Answer 9

在带有引导程序4和jquery的angular 7中，我发现了这一点，并且工作正常。我使用了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');
    });
   }

Answer 10

我在使用 Safari 的 iPhone 上使用 Bootstrap 4 时遇到了这个问题。

在 PC/桌面上，工具提示效果很好。但是在使用 iOS 14 的 iPhone 上查看时，单击/点击按钮后，工具提示仍然可见。隐藏图层时也是如此。

对我来说，添加此代码解决了 iPhone 上的问题：

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

jQuery('[data-toggle="tooltip"]').on("click", function () {
    $(this).tooltip("hide");
});

Answer 11

使用委托使其对ajax友好，

// if you're not using turbolinks, then you can remove this parent wrapper
$(document).on('turbolinks:load'), function() {  
  // enable tooltip with delegation to allow ajax pages to keep tooltip enabled
  $('body').tooltip({
    select: "[data-toggle='tooltip']"
  });

  // remove old tooltip from sticking on the page when calling ajax with turbolinks
  $('body').on('click', "[data-toggle='tooltip']", function() {
    $(this).tooltip('dispose');
  });
});

Answer 12

使用强制blur（）可能会降低用户体验。我不会那样做。我发现删除“ data-original-title”以及删除属性“ data-toggle”和“ title”对我来说都是有效的。

    $(id).tooltip('hide');
    $(id).removeAttr("data-toggle");
    $(id).removeAttr("data-original-title");
    $(id).removeAttr("title");

Answer 13

如果有人要设置一个工具提示，该提示将在单击后显示一段时间，这就是我的做法：

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

$('[data-toggle="tooltip"]').on('shown.bs.tooltip', function () {
$(this).tooltip('hide')
})

Answer 14

您也可以对旧版本使用这种方式，因为可接受的答案对我不起作用，我为自己编写了这段代码，并且效果很好。

$(document).on('mousedown', "[aria-describedby]", function() {
    $("[aria-describedby]").tooltip('hide');
});

Answer 15

工作解决方案

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

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

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

Answer 16

我的解决方法是

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

我没有遵循Bootstrap文档中的这一规则：

在从DOM中删除其相应元素之前，必须先隐藏工具提示。

Answer 17

您还可以使用以下方法在 mouseleave 上隐藏工具提示，如下所示：

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

Answer 18

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

Answer 19

此解决方案对我有用。

$('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

我尝试了先前答案中给出的大多数解决方案，但没有一个对我有用。

Answer 20

在文档准备功能中使用此功能

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

Answer 21

我解决此问题的方法是使用以下代码删除点击事件功能中的工具提示：

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

Answer 22

这对我有用：

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

});

我动态地禁用了保存按钮然后出现了问题。

Answer 23

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

按钮点击后，Bootstrap的工具提示不会消失鼠标离开

23 个答案: