如何使工具提示在弹出窗口中显示？

Question

在我的电脑上，这段代码会在鼠标悬停在Bootstrap图标上时显示提示框。

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

有没有关于如何在弹出框内的元素上显示工具提示的想法？

- minda

---

不要手动设置 data-original-title。JS 会为您完成此操作。 - Phil

Answer 1

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

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

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

Demo here - http://jsfiddle.net/jAtqW/

- Phil