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!