5

在我的机器上，此代码在将鼠标悬停在引导字形图标上时会生成一个工具提示：

<span class="glyphicon glyphicon-info-sign tt" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top"> </span>

但是，当我将工具提示堆叠在弹出框内时，用于自行生成工具提示的代码不再生成工具提示：

<a href="#" class="example" data-toggle="popover" >Experiment</a>
<div id="popover_content_wrapper" style="display: none">
  <a href=""> 
    <span class="glyphicon glyphicon-info-sign tt" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top"> </span>
  </a>
</div>

这是我在 javascript 中触发弹出框和工具提示的方式（在这些 html 元素下方）

<script>
    $('.tt').tooltip();
    $('.example').popover({
        trigger: 'hover click', 
        html: true,
        content: function() {
            return $('#popover_content_wrapper').html();
        }, 
        placement: 'top', 
        delay: { show: 500, hide: 1000 }
    });

</script>

关于如何让工具提示出现在弹出框内的元素上的任何想法？

4

1 回答 1

5

问题是.tt出现在弹出窗口中的分类元素与用于绑定的元素不同.tooltip()。

您需要通过selector选项使用委托模型，例如

$(document).tooltip({
    selector: '.tt'
});

演示在这里 - http://jsfiddle.net/jAtqW/

于 2013-10-18T00:44:16.097 回答