多个jQuery工具提示相互干扰

Multiple jQuery Tooltips Interfering With Each Other

本文关键字：干扰 工具提示 jQuery 多个      更新时间：2023-09-26

我使用以下代码来拥有不同的工具提示，但每个元素只有一个工具提示。如果我只使用其中的一个，它们就可以正常工作。但是像这样，它们不能正常工作（出现在错误的位置，使用错误的类，等等）

    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>

我现在发现，当所有这些一起使用时，只有最后一个（底部）总是有效的。对于其他人，我是否提供选择都无关紧要。

--

如何让它们一起工作

试着用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>

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

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

$('.jui-tooltip-top').tooltip($.extend(true, {}, options, {
    position: {
        my: 'right center',
        at: 'left-' + space + ' center'
    },
    tooltipClass: 'horizontal'
}));
// etc
相关文章：