Question

I’m currently housing over 100 hidden tooltip boxes on a page, which is causing slow loading times, I want to move these tooltips on a separate page e.g. tooltips.html – and only call a tooltip when it’s needed when I rollover (I guess aJax?)

The tooltips can be identified via a div e.g.

div id=”tip1″

div id=”tip2″

so that’s a good way to distinguish each tooltip.

The tooltip will have text and sometimes an image (don’t know if this is an issue).

I’m having trouble finding something that can handle this, hope someone can assist.

Many thanks.

Answer 1

you could use something like this, in the event of your choice (mouseover)

$('.class-of-element-that-triggers-tooltip').hover(function(){
    var tooltipId = this.hash; // here you should dynamically assign the id of the tooltip you want to the variable
    $('#tooltip-container').empty().load('tooltip-page.html ' + tooltipId).show();
}, function(){
    $('#tooltip-container').hide();
});

You links (assuming you use links for the elements to trigger the tooltip) should be something like this

<a href="#tip1" class="class-of-element-that-triggers-tooltip">show tip 1</a>

And you would also need a the container of the tooltip.

<div id="tooltip-container"></div>

---

The styling will work as it currently does. (if the relevant css is included in the page the user is viewing, then the tooltips can make use of that..)

I would also probably put a loader image as the background of the #tooltip-container element, so that it is displayed while the tooltip is being fetched from the AJAX request..