Numerous QTip2 elements, same hint

Question

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

I tried several different approaches and looked online so that the answers to them did not help.

At the moment 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 a way for all of these elements to use the same tooltip. I want all of them to use the same content (in this case the same form) and refer to the tooltip in exactly the same way (using the tooltip element with the identifier "ui-tooltip-editLink").

With what I have, it is currently creating the first tooltip correctly, but if I add a new item and redefine the tooltips, it will create a completely new tooltip with a different identifier for the new item.

- - , ?

Answer 1

, div , -

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

.html(), , , , , ...

tooltipBearing - .

tooltipDiv - div, .

Answer 2

qtip , qtip .

.

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

Answer 3

, , Tooltip hover/click.

GitHub: https://github.com/Craga89/qTip2/issues/173

Answer 4

, . . , , :

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

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

. , . cutom event.

Answer 5

738048 :

$('[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 identifier of the HTML element containing the text is taken from the attribute data-tooltipid; My attributes hrefand onclickremoved as they become obsolete as a tooltip.