twitter-bootstrap - 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