Всплывающая подсказка Jquery Qtip - как выбрать другое место для всплывающей подсказки

Question

Я установил Qtip и использовал его для подсказок на карте:

http://www.gregquinn.com/oneworld/about_people6.html

Вы можете навести курсор на Красные Булавки и увидеть всплывающую подсказку, которая там сейчас.

Но они хотят, чтобы при наведении на слово "Италия" (текст слева) всплывающая подсказка появлялась на карте рядом с Красной булавкой, где находится Италия.

Для красных булавок на карте я использую карты изображений с тэгами ALT, чтобы вызвать всплывающие подсказки следующим образом:

<script class="example" type="text/javascript">
// Create the tooltips only when document ready
$(document).ready(function()
{
// We'll target all AREA elements with alt tags (Don't target the map element!!!)
$('area[alt]').qtip(
{
    content: {
        attr: 'alt' // Use the ALT attribute of the area map for the content
    },
    style: {
        classes: 'ui-tooltip-tipsy ui-tooltip-shadow ui-tooltip-light'
    }
});
});
</script>

В документации Qtip сказано, что вы можете выбрать позицию (position: { target: $('ul:first li:last') }) но я не знаю, как это сделать, или я могу нацелить координаты карты, и все ли они существуют на одной странице?

Answer 1

Вы должны быть в состоянии использовать hover событие в тексте слева, который вызывает show метод конкретного qtip, на который вы хотите нацелиться.

В вашем HTML, вы должны добавить класс к вашим ссылкам, а также добавить атрибут данных.

<span class="qt-pointer" data-country="italy">Italy</span>
<span class="qt-pointer" data-country="kenya">Kenya</span>

Javascript будет выглядеть примерно так:

$('.qt-pointer').hover(function () {
  // on hover
  $('#' + $(this).data('country')).qtip("show");
}, function () {
  // on exit
  $('#' + $(this).data('country')).qtip("hide");
});

Ваши области qtip должны иметь идентификаторы, которые соответствуют атрибуту data-country указателей qt. Я не использовал qtip, поэтому рассматривайте приведенный выше код как псевдокод. Надеюсь, это поможет решить вашу проблему.