同一元素上的 Bootstrap 3 弹出框和工具提示 - 工具提示不会触发

Question

我试图简单地向一个元素添加一个弹出框和工具提示，每个元素都有不同的内容。

弹出框正常工作，但工具提示没有触发。

这是我正在尝试的：

HTML

<div 
  class="myPopover" 
  data-html="true" 
  popover-title="<h4>title popover</h4>" 
  popover-content="msg popover" 
  data-tooltip="tooltip" 
  title-tooltip="<h4>Title tooltip</h4>mesage in tooltip"
>
  hover / click me
</div>

JS

var toolTipSettings = {
  trigger: 'hover',
  container: 'body',
  placement: 'left',
  title: function(){
    return $(this).attr('title-tooltip');
  }
}

var popOverSettings = {
  trigger: 'click',
  placement: 'bottom',
  container: 'body',
  selector: '.myPopover',
  title: function(){
    return $(this).attr('popover-title');
  },
  content: function () {
    return $(this).attr('popover-content');
  }
}

$('body').popover(popOverSettings);
$('[data-tooltip="tooltip"]').tooltip(toolTipSettings);

有没有更好的方法来做到这一点？

Here's a bootply to show code in action

Answer 1

在你的 Bootply 玩了一会儿之后，我明白了你的问题。您将工具提示放在 .myPopover 元素的左侧。但是，此元素当前具有 100% 的屏幕宽度，这意味着您的顶部提示出现在屏幕的左侧和之外。它是出现了，你只是看不到它。

只是为了让您入门，添加此 CSS 可让您看到它的实际效果：

.myPopover {
  margin-top: 60px;
  margin-left: auto;     //Margin left and right to auto to center element
  margin-right: auto;
  width: 200px;          //Set width so it doesn't consume 100%
  text-align: center;
  cursor: pointer;
}

Updated Bootply