CODEWITHSUNDEEP
javascriptjqueryjquery-tooltip
Simon Ferndriger
Simon Ferndriger

Reputation: 4962

Multiple jQuery Tooltips Interfering With Each Other

I use the following code to have different tooltips, but only 1 tooltip per element. They work just fine, if I only use 1 of them. But all together like this, they don't work properly (show up in the wrong location, with the wrong class, etc)

    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 (examples)

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

What I figured out by now, when using all together, only the last one (bottom) always works. With the others, I then does not matter whether I provide the options or not.

--

How can I make them work all together?

Upvotes: 0

Views: 167

Answers (2)

Simon Ferndriger
Simon Ferndriger

Reputation: 4962

Solved it, by "cloning" the options. They were interfering with each other, even after initialization.

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

// etc

Upvotes: 0

erikrunia
erikrunia

Reputation: 2383

try just marking all your tooltips with the data-toggle="tooltip" and then activating them all with one line of jquery.

$(function () {

    ...

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

To achieve different positions using this technique, use the data-* pattern on the elements that have the tooltips and specify the position that way. I believe its data-placement="center top" or something like that.

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

This way you dont need a different set of options for every placement, you can set a default placement in your options, and then override on elements that need a custom placement.

Upvotes: 1

Related Questions