¿La mejor información sobre herramientas de jQuery para obtener contenido de un archivo html estático?

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.

Muchas gracias.

preguntado el 02 de febrero de 12 a las 11:02

2 Respuestas

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 cargador image as the background of the #tooltip-container element, so that it is displayed while the tooltip is being fetched from the AJAX request..

Respondido 02 Feb 12, 15:02

Thanks, have you got an idea of the css needed for it to be positioned correctly on hover at all please? - user1145334

@user, define what correctamente is.. I mean where should the tooltip appear ? above/below/right/left of the hovered element ? at a specific location for all tooltips ? - Gabriele Petrioli

You might want to look into jQuery .carga() método. Por ejemplo:

$('#myTarget').load('tooltips.html div#tip1');

Respondido 02 Feb 12, 15:02

Can you give an example please? e.g. what effects would that give?....how would the tooltip display.... how do i control styling? thanks, might be too stripped down for me, need something I can work with out-the-box - user1145334

Ahh, I assumed from your question that you had all the tooltips code sorted and that you only wanted to "ajaxify" the retrieval of specific tooltip content. Try Googling "jquery tooltip plugins", plenty of results there with out-of-the-box solutions. - Goran Mottram

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.