Лучший JQuery Tooltip для извлечения контента из статического файла HTML?

Question

В настоящее время я размещаю более 100 скрытых всплывающих окон на странице, что приводит к медленному времени загрузки, я хочу переместить эти всплывающие подсказки на отдельную страницу, например, tooltips.html, и вызывать всплывающую подсказку только тогда, когда она необходима при переходе(Я думаю, aJax?)

Подсказки могут быть идентифицированы с помощью div, например:

div id = "tip1"

div id = "tip2"

так что это хороший способ различить каждую подсказку.

Во всплывающей подсказке будет текст, а иногда и изображение (не знаю, если это проблема).

У меня проблемы с поискомчто-то, что может с этим справиться, надеюсь, кто-то может помочь.

Большое спасибо.

Answer 1

вы можете использовать что-то подобное в случае вашего выбора (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();
});

Ссылки ( при условии, что вы используете ссылки для элементов натриггер всплывающей подсказки ) должен выглядеть примерно так

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

И вам также понадобится контейнер всплывающей подсказки.

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

---

Стиль будет работать какэто в настоящее время делает.( если соответствующая CSS включена в страницу, которую просматривает пользователь, то всплывающие подсказки могут использовать это .. )

Я бы, вероятно, также добавил loader изображение в качестве фона элемента #tooltip-container, чтобы оно отображалось во время извлечения всплывающей подсказки из запроса AJAX.

Answer 2

Возможно, вы захотите изучить метод jQuery .load () .Например:

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