Question

我有2个嵌套<div>，两个都有tooltip()。
当我将鼠标悬停在内部<div>，外部<div>也会显示它的工具提示。
我试图通过设置内部<div>标题来解决这个问题到:hover上的空字符串。

$(inner).hover({
  $(outer).attr('title','');
},{
  $(outer).attr('title','original title');
});

我创建了一个codepen example

注意：我将标题更改为＆＃39; red＆＃39;所以你可以看到标题确实发生了变化。

为什么更改标题并不会改变工具提示的内容？
我们如何更改Bootstrap Tooltip的内容？（这应该是 stackoverflow 它自己的问题）

Answer 1

回答＃1：

通过检查元素并用JS代码观察它的变化，我注意到了一个名为data-original-title的div的属性，它仍然存在＆＃34;蓝色＆＃34;输入绿色时（这是工具提示元素读取和显示的内容）。通过将脚本更改为

 $('#a').attr({"data-original-title": "red"});

蓝色变红。这是否回答了你的问题？

Answer 2

您可以检查当前是否在内部区块内悬停

jQuery的：

$(document).ready(function(){
  var bIsShown = true;
  $("#b").on('mouseenter', function(){  
      bIsShown = true;

  }).on('mouseleave', function() {
      bIsShown = false;
  })


  $("#a").on('mousemove', function(){  
    if(bIsShown) {
      $(this).data("bs.tooltip").$tip.removeClass("in");
    }
    else {
      $(this).data("bs.tooltip").$tip.addClass("in");
    }
  })
  $('[data-toggle="tooltip"]').tooltip({
    animated : 'fade',
    placement : 'bottom',
    container: 'body'});
});

您的示例：http://codepen.io/anon/pen/JGqXPw

Answer 3

使用.tooltip('hide')和.tooltip('show')
这部分是由@BuddhistBeast回答的，谢谢！

$("#b").on('mouseover', function(){   
    $('#a').tooltip('hide');
  }).on('mouseleave', function(){   
    $('#a').tooltip('show');
  });
  $('[data-toggle="tooltip"]').tooltip({
    animated : 'true',
    placement : 'bottom',
    container: 'body'});

嵌套Bootstrap Tooltip divs切换父div的工具提示

3 个答案: