CODEWITHSUNDEEP
javascriptjqueryhtmlqtipqtip2
kand
kand

Reputation: 2338

QTip2 Multiple Elements, Same Tooltip

I have a page in which I dynamically create elements that need tooltips.

I've tried a few different approaches and looked online for some answers to no avail.

As of now, I have this:

var $links = $('a.link');
var len = $links.length;
for(var i = 0; i < len; i++){
    var $ele = $($links[i]);
    $ele.qtip({
        id: 'editLink',
        overwrite: false,
        content: {
            text: $linkEditor,
            title: {
                text: 'Edit Link',
                button: true
            }
        },
        position: {
            my: 'top center',
            at: 'bottom center',
            viewport: $(window)
        },
        show: {
            event: 'mouseover',
            solo: true
        },
        hide: false,
        style: {classes: 'ui-tooltip-shadow ui-tooltip-red'}
    });
}

What I'm looking for is some way to have all of these elements use the exact same tooltip. I want them all to use the exact same content (in this case a single form) and reference the tooltip in the exact same way (by the tooltip element with id 'ui-tooltip-editLink').

With what I have, it currently creates the first tooltip correctly, but if I add a new element and reassign tooltips, it creates a whole new tooltip with a different id for the new element.

Does anyone know some way of accomplishing a multiple elements, same tooltip approach?

Upvotes: 5

Views: 2189

Answers (5)

Tobias
Tobias

Reputation: 2561

Based on the answer of user738048, my working solution is like this:

$('[data-tooltipid]').each(function() {
    var ttid = $(this).data('tooltipid');
    $(this).qtip({
        content: {
            text: $('#'+ttid).html(),
        },
        position: {
            my: 'top left',
            at: 'bottom left',
            target: $(this)
        }
    }).removeAttr('href').removeAttr('onclick');
});

In my case, the id of the HTML element containing the text is taken from a data-tooltipid attribute; my href and onclick attributes are removed since they are obsoleted by the tooltip.

Upvotes: 0

Bibokid
Bibokid

Reputation: 285

This is what I did. I attached the my tooltip on a unique element. And then all of my other elements that need the same tooltip will just trigger the unique element's tooltip display:

$('#unique-element').qtip({
  content: {text: 'My Tooltip'},
});

$('.other-elements').click(function(){
  $('#unique-element').qtip('show');
});

However, the all of your tooltips will be displayed in a fixed position. This was not a problem in my case because I was using the tooltip as modal. You will have to manage the tooltip position via cutom event methods.

Upvotes: 0

WizardsOfWor
WizardsOfWor

Reputation: 3144

I've figured out how to have one tooltip div be shared by many tooltip images if anyone finds it handy 

 $(".tooltipBearing").qtip({
                            content: {  
                                text: $("#tooltipDiv").html()
                            }          
                      });

If you fail to put the .html() on there, you will see the shared tooltip show up once, and then when you activate it from another image, it will no longer work for the first one...

The tooltipBearing is a class set on some images in the page.

tooltipDiv is the ID of the div containing your tooltip content.

Upvotes: 1

mfras3r
mfras3r

Reputation: 136

Sadly it looks like we need to clone the Tooltip element for each of the hover/click elements.

Craig mentions this in the GitHub issue: https://github.com/Craga89/qTip2/issues/173

Upvotes: 0

AZee
AZee

Reputation: 23

In order to use qtip in dynamically created element, you need to include qtip during the element initialization.

e.g. 

$('<div style="top:0px; left:0px; position:absolute;">abc123</div>').appendTo("body").qtip({content: "test"});

Upvotes: 0

Related Questions