CODEWITHSUNDEEP
javascriptjquerytooltipster
Gammik26
Gammik26

Reputation: 31

Tooltipster doesn't work with dynamically generated elements

I've been dealing with this problem for some days but I can't find the solution. I have a function in Javascript that generates HTML after an Ajax call is done and I call this function like this:

$(document).ready(function() {
    $("#list").change(function() {
        reloadInfo($('#list').val());
    });
    reloadInfo($('#list').val());
});

And my function is the next:

function reloadInfo(id) {
    var div = document.getElementById(id);
    ...
    code += "<img id='led_" + res.id + "' src='green_led.gif' style='cursor: pointer' class='tooltipstered'>";
    code += "<img id='" + res.id + "' src='mygraph.jpg'>";
    ...
    div.innerHTML = code;
}

After that, I've tried to use Tooltipster in order to show 'mygraph.jpg' into a tooltip when I put the mouse over the 'green_led.gif' image and hide it when I move out the mouse cursor. To do so, I've used the next code into my $(document).ready():

$(document).ready(function() {
    $("#list").change(function() {
        reloadInfo($('#list').val());
    });
    reloadInfo($('#list').val());

    $("body").on('mouseover', '.tooltipstered', function(){
        $(this).tooltipster({
            trigger: 'custom'
        }).tooltipster('open').tooltipster('content', 'MYcontent');
    });
});

But it doesn't seem to work. I've read Tooltipster documentation but I don't know what I'm doing wrong when I generate dynamically the HTML code (when I try it with static HTML it works, but I do it a bit different):

JavaScript

    $(document).ready(function(){
        $(".tooltipstered").tooltipster({
            trigger: 'custom',
            arrow: false
        }).on('mouseover', function() {
            $(this).tooltipster('instance').content("foo").open();
        }).on('mouseout', function() {
            $(this).tooltipster('instance').close();
        })
    });

HTML

<body>
    <button id="1" class="tooltipstered" style="float: right">Hover1</button>
    <button id="2" class="tooltipstered">Hover1</button>
</body>

The problem is when I generate HTML with JavaScript. First time I put the cursor over the image I don't get any error in the browser console, but the second time I repeat it i get this errors:

   <img id=​"led_27269" src=​"green_led.gif" style=​"cursor:​ pointer" class=​"tooltipstered">​

If anybody knows what I'm doing wrong it would be of help. Thank you very much in advanced!!

Upvotes: 3

Views: 7764

Answers (1)

Master DJon
Master DJon

Reputation: 1965

Two things :

  • You shall destroy the tooltipsters and recreate them on HTML content change.
  • Calling a tooltipster method shall be done via $(...).tooltipster(methodName, arg1, arg2,...). Here you should look at the documentation for correct method name and arguments. So, you should call the creation (without method name) each time as you did in $("body").on('mouseover' ....

For recreation :

$(document).ready(function(){
    $(".tooltipstered").tooltipster({
        trigger: 'custom',
        arrow: false
    }).on('mouseover', function() {
        $(this).tooltipster('instance').content("foo").open();
    }).on('mouseout', function() {
        $(this).tooltipster('instance').close();
    })
});

shall be moved :

function reloadInfo(id) {
    $(".tooltipstered").tooltipster('destroy');

    ... your reloading code

    $(".tooltipstered").tooltipster({
        trigger: 'custom',
        arrow: false
    }).on('mouseover', function() {
        $(this).tooltipster('instance').content("foo").open();
    }).on('mouseout', function() {
        $(this).tooltipster('instance').close();
    });
}

Upvotes: 4

Related Questions