phpjavascriptjquerytooltiptipsy

Using jQuery tooltips in a jQuery auto-refreshing div

I'm having issues getting jQuery tooltips (using Tipsy) to work. The tooltips work fine on regular pages, but I actually need the tooltips on a page that I am including through PHP. The reason why I'm including that page, is because I'm also using jQuery to auto-refresh that included page every x milliseconds.

It appears that this auto-refresh mechanism is keeping the tooltips from functioning properly. When I remove that mechanism, the tooltips appear but that part of the page obviously does not reload itself anymore at an interval. I'm looking for a way to get Tipsy to work while making sure my included page refreshes itself.

I include my page as follows:

<div id="vardisplay">
    <?php include("vardisplay.php"); ?>
</div>

I then use the following script to refresh the "vardisplay" DIV, resulting in my included page to be reloaded:

<script>
$(document).ready(function() {
    $('#vardisplay').load('editarticle.php?bid=<?php echo $bnummer ?> #vardisplay');
    var refreshId = setInterval(function() {
        $('#vardisplay').load('editarticle.php?bid=<?php echo $bnummer ?> #vardisplay')}, 750);
   $.ajaxSetup({ cache: false });
});
</script>

The object I would want a Tipsy tooltip on (within my included page) could be something like:

<div id="TipsyMe" title="I got tipsied">
     <p>Testpiece</p>
</div>

I'm currently trying to achieve that particular tooltip by putting this script on that page, which is supposed to show "I got tipsied" in a Tipsy tooltip:

<script>
$(function() {
        $("#TipsyMe").tipsy({gravity: 's'});
    });
</script>

What ends up showing is a regular browser tooltip where jQuery is fully ignored. Again, it works fine when I remove the auto-refresh mechanism on the main page.

I'm dumbfounded at this point. I've been Googling for the past few hours without any result what-so-ever. Any help would be greatly appreciated!

Solution

  • in the tipsy doc, you can stumble upon an option called "live"

    $(function() {
    $("#TipsyMe").tipsy({
        gravity: 's',
        live: true
    });
});

    shall do it. (as you seem new, accepting answer will attract people for your future answer hint hint hint :P)

    be careful thou: "live tooltips do not support manual triggering." (from the doc)

    EDIT: didn't see properly your code:

    $(function() {
    $("div.someTotal").tipsy({
        gravity: 's',
        live: true,
        title: "I got tipsied"
    });
});

    "someTotal" is the class for all you "boxes" where you have the edit and delete icon. If you don't have such class yet, you can create one (you can name it tipsy by example) and use it ($("div.tipsy").tipsy({...