1

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!

Wesley
  • 301
  • 1
  • 2
  • 8

1 Answers1

0

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({...

roselan
  • 3,755
  • 1
  • 20
  • 20
  • I see, thanks! It does work. One small extra problem came around the corner: the tooltips 'stick' on the screen if I leave my mouse on them for too long and won't go away anymore. I have a feeling it's because the page is being reloaded before I move my mouse. Example: http://d.pr/abrm The tooltips appear when hovering the rows marked with blue. Do you have any idea how to solve that? – Wesley Nov 14 '11 at 23:32
  • all 46 petazillons tooltip plugins have this issue. This is due to "hover" events implementation in browser I believe. (it's in position 47'872 on my todo list to write one without this "tooltip refuses to go" issue). – roselan Nov 14 '11 at 23:52
  • wait I didn't read your code precisely, you create a tipsy div. this is not how it supposed to work, it's more like `$('div.endTotal').tipsy({...});`. edited my answer. – roselan Nov 15 '11 at 00:06
  • Yeah, the rows you see in the picture are table rows. I was already calling them through `$('tr.varRow').tipsy({...});` since I'm using .varRow as the CSS class for those rows as well. I guess I just have to find a way to have the tooltips destroy themselves before the div is reloaded. – Wesley Nov 15 '11 at 08:35
  • What I mentioned above doesn't work. After reloading the div, the tooltip won't come back until I move my mouse, as I could have expected. – Wesley Nov 15 '11 at 09:02