1

我正在尝试使用 tooltip() 并打开多实例，如下所示：

$("*").tooltip({
    selector: "*[rel=tooltipTOP]",
    placement: "top"
  });
  $('*').tooltip({
    selector: "*[rel=tooltipBOTTOM]",
    placement: "bottom"
  });

然后在html中我做例如

<a rel="tooltipTOP" data-original-title="top">tooltip TOP</a>
<a rel="tooltipBOTTOM" data-original-title="bottom">tooltip BOTTOM</a>

所以 tooltip TOP 没问题，但是 tooltipBOTTOM 不显示 tooltip ... 为什么？

我也尝试为 tooltipBOTTOM 放置特定类，但它不起作用，它仅实例化 tooltipTOP rel ：/

JSFIDDLE http://jsfiddle.net/BH2GM/1/

4

5 回答 5

7

HTML

    <ul class="bs-docs-tooltip-examples">
                  <li><a href="#" rel="tooltip" data-placement="top" data-original-title="Tooltip on top">Tooltip on top</a></li>
                  <li><a href="#" rel="tooltip" data-placement="right" data-original-title="Tooltip on right">Tooltip on right</a></li>
                  <li><a href="#" rel="tooltip" data-placement="bottom" data-original-title="Tooltip on bottom">Tooltip on bottom</a></li>
                  <li><a href="#" rel="tooltip" data-placement="left" data-original-title="Tooltip on left">Tooltip on left</a></li>
</ul>

JS

$('a').tooltip();

演示

于 2012-09-24T19:35:21.427 回答
3

首先，你为什么要这样做rel？你真的应该使用类。

<a class="tooltipTOP">tooltip TOP</a>
<a class="tooltipBOTTOM">tooltip BOTTOM</a>

进而

$(".tooltipTOP").tooltip({
    placement: "top"
});
$(".tooltipBOTTOM").tooltip({
    placement: "bottom"
});​

编辑：但如果你必须使用 rel，这里是解决方案：

$("*[rel=tooltipTOP]").tooltip({
    placement: "top",
    trigger: "hover"
});
$('*[rel=tooltipBOTTOM]').tooltip({
    placement: "bottom",
    trigger: "hover"
});​
于 2012-09-24T19:35:15.600 回答
3

我发现问题出在 Jquery 选择器上。

如果您有 2 个工具提示实例，则可以执行此操作

$("body").tooltip({
    selector: "*[rel=tooltipTOP]",
    placement: "top"
  });
  $('html').tooltip({
    selector: "*[rel=tooltipBOTTOM]",
    placement: "bottom"
  });

注意 jquery 选择器是不同的。第一个是BODY第二个是HTML

于 2014-08-10T14:38:34.847 回答
0

您的问题可能是您在动态生成的元素上使用工具提示？我有同样的问题，使用“现场”来让它工作......

$(document).live("mouseover", function () {
    $('.tooltipTop').tooltip({
        placement: "top"
    });
    $(".tooltipBottom").tooltip({
        placement: "bottom"
    });
    $(".tooltipRight").tooltip({
        placement: "right"
    });
    $(".tooltipLeft").tooltip({
        placement: "left"
    });
});
于 2013-04-04T16:19:01.120 回答
0

对我来说，它通过增加我分配工具提示的元素的 z-index 来解决。

于 2018-07-05T13:10:25.857 回答