如何让工具提示出现在弹出窗口中？ [英] How to get a tooltip to appear in a popover?

问题描述

在我的机器上，此代码在悬停在bootstrap glyphicon上时生成工具提示：

On my machine, this code produces a tooltip on hover over a bootstrap glyphicon:

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

然而，当我将工具提示堆叠在一个popover中时，用于生成工具提示的代码本身没有更长时间产生工具提示：

However when I stack the tooltip inside a popover, the code used to generate a tooltip on its own no longer produces a tooltip:

<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中触发popover和工具提示的方法（在这些html元素下面）

Here's how I'm triggering the popover and tooltip in the javascript (below these html elements)

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

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

Any ideas on how to get a tooltip to appear on an element inside a popover?

推荐答案

问题是弹出窗口中出现的 .tt 分类元素不是用于绑定 .tooltip（）的同一个。

The problem is that the .tt classed element that appears in your popover is not the same one used to bind .tooltip() to.

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

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

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

这篇关于如何让工具提示出现在弹出窗口中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！