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);

有更好的方法吗？

Answer 1

在与你的Bootply玩了一下之后，我看到了你的问题。您将工具提示放在.myPopover元素的左侧。但是，此元素当前具有100％宽度的scrren，这意味着您的tooptip出现在屏幕的左侧和下方。它 IS 出现，您无法看到它。

为了让您入门，添加此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

Bootstrap 3 popover＆amp;相同元素上的工具提示 - 工具提示不会触发

1 个答案: