Sticky Tooltip script won't reload within ajax driven content

[dkap]

Long-time Dynamic Drive script user, first time forum poster...

1) Script Title: Sticky Tooltip script

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex5/stickytooltip.htm

3) Describe problem:

The script works great except for one thing I haven't been able to sort out. I'm using it in conjunction with a navigable weekly calendar, with the weekly navigation being handled by ajax so the overall page doesn't have to reload.

The problem is, the tooltip script does not operate on subsequent pages (i.e. navigating to a week other than the current one). There are not any JavaScript errors. It simply does nothing when hovering over one of the events.

Note: I also toyed with "Drop down/ Overlapping Content script" and it behaved the same way, so it's more a JavaScript issue than specific to this script. However, the "DHTML tooltip script" works fine within ajax, the difference being that that script doesn't require initialization of the content div's.

http://dynamicdrive.com/dynamicindex5/overlapcontent.htm
http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm

(The obvious question would be, why not just use the latter? It lacks the desired functionality of making the hover content sticky for clicking on event links within it.)

Along that line of reasoning, I tried moving Sticky Tooltip script's stickytooltip.js include to the ajax file to see if reloading it with each weekly navigated page request would reinitialize the necessary functions. Worked on the initial week but not any subsequent ones; same as before.

Any ideas?

Here's the test page, bottom of the News, Highlights & Promotions box:

http://www.activesalem.com/test2.php

Edit: You can confirm that the data is properly being assembled by viewing the source code of the underlying page for a previous week here:

http://activesalem.com/activities/week_overview.php?y=2011&m=5&d=29

Thanks,
Dan

[ddadmin]

Are you able to define all at once the markup for the tooltips on your page beyond just what is needed initially inside the calendar? For example:


<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">

<div id="sticky1" class="atip" style="width:200px">
tooltip 1
</div>

<div id="sticky2" class="atip" style="width:200px">
tooltip 1
</div>

<div id="sticky3" class="atip" style="width:200px">
tooltip 1
</div>

<div id="sticky4" class="atip" style="width:200px">
tooltip 1
</div>

</div>
<div class="stickystatus"></div>
</div>

In other words, be able to generate all of the tooltips used by the calendar in advance and add it to the page? If so, then Sticky Tooltip script can be modified relatively easily to reinitialize each time your calendar changes, rescan any new links within the calendar carrying data-tooltip="stickyX", and attach the appropriate tooltip on the page to it. Just use the below modified .js file. With it, you would just call the initialization code:


stickytooltip.init("*[data-tooltip]", "mystickytooltip")

again each time your calendar changes to get the script to rescan it and associate the correct tooltip to the target links. I've included a simple demo below that shows this in action. Using the modified .js file with the below HTML code, when you click on "Canada", the original anchor link is replaced with a link to Canada that in turn shows the tooltip "sticky2" when the mouse hovers over it:


<p id="t"><a href="http://en.wikipedia.org/wiki/Thailand" data-tooltip="sticky1">Thailand</a></p>


<p>Some page contents here...</p>

<!--HTML for the tooltips-->
<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">

<div id="sticky1" class="atip" style="width:200px">
<img src="http://img121.imageshack.us/img121/746/thailand.jpg" /><br />
Thailand boasts some of the most popular and luxurious resorts in Asia.
</div>

<div id="sticky2" class="atip" style="width:200px">
Canada is a beautiful country.
</div>

</div>
<div class="stickystatus"></div>
</div>

<script>

function updateit(){
document.getElementById("t").innerHTML='<a href="#" data-tooltip="sticky2">Canada</a>'
stickytooltip.init("*[data-tooltip]", "mystickytooltip")
}

</script>

<a href="javascript:updateit()">Canada</a>

[dkap]

Are you able to define all at once the markup for the tooltips on your page beyond just what is needed initially inside the calendar?
That would be impractical, as the two calendars feeding into the weekly display could grow quite large over time, with no pruning of old events guaranteed to occur, which would make for a huge amount of unneeded html to load.

However, your alternative JS file and reinitialization suggestion gave me an idea that appears to be working! I simply added stickytooltip.init("*[data-tooltip]", "mystickytooltip"); at the end of my AJAX loading function, along with the modified stickytooltip.js file.

Brilliant, thanks!

Dan