Question

我使用以下代码来提供不同的工具提示，但每个元素只有1个工具提示。如果我只使用其中一个，它们工作得很好。但是像这样一起，他们不能正常工作（出现在错误的位置，错误的班级等）

    var options = {
        show: true,
        hide: false,
        position: {
            using: function(position, feedback){
                $(this).css(position);
                $(this).addClass(feedback.horizontal);
                $(this).addClass(feedback.vertical);
            }
        }
    }


    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
    // Top
    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
    options.position.my     = 'center bottom';
    options.position.at     = 'center top-' + space;
    options.tooltipClass    = 'vertical';
    //...
    $('.jui-tooltip-top').tooltip(options);

    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
    // Left
    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
    options.position.my     = 'right center';
    options.position.at     = 'left-' + space + ' center';
    options.tooltipClass    = 'horizontal';
    //...
    $('.jui-tooltip-left').tooltip(options);

    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
    // Right
    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
    options.position.my     = 'left center';
    options.position.at     = 'right-' + space + ' center';
    options.tooltipClass    = 'horizontal';
    //...
    $('.jui-tooltip-right').tooltip(options);

    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
    // Bottom (Default)
    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
    options.position.my     = 'center top';
    options.position.at     = 'center bottom+' + space;
    options.tooltipClass    = 'vertical';
    //...
    $('.jui-tooltip').tooltip(options);

HTML（示例）

<a href="#" title="Some title" class="jui-tooltip-left">...</a>
<a href="#" title="Some title" class="jui-tooltip">...</a>
<a href="#" title="Some title" class="jui-tooltip-top">...</a>

我现在想到的是，当一起使用时，只有最后一个（底部）始终有效。与其他人一起，无论我是否提供选项都无关紧要。

-

如何让它们一起工作？

Answer 1

尝试使用data-toggle="tooltip"标记所有工具提示，然后使用一行jquery激活它们。

$(function () {

    ...

    $("[data-toggle='tooltip']").tooltip(options);
});

要使用此技术获得不同的位置，请在具有工具提示的元素上使用data-*模式，并指定该方式的位置。我相信它的data-placement="center top"或类似的东西。

<a data-placement="center top" data-toggle="tooltip" href="#" data-original-title="Tooltip on top center">Tooltip on top center</a>

这样，您不需要为每个展示位置设置不同的选项，您可以在选项中设置默认展示位置，然后覆盖需要自定义展示位置的元素。

Answer 2

通过“克隆”options来解决它。即使在初始化之后，它们也相互干扰。

$('.jui-tooltip-top').tooltip($.extend(true, {}, options, {
    position: {
        my: 'right center',
        at: 'left-' + space + ' center'
    },
    tooltipClass: 'horizontal'
}));

// etc

多个jQuery工具提示相互干扰

2 个答案: