Подсказка за Jquery Qtip - как мога да насоча различно местоположение за подсказката

Инсталирах 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') }), но не знам как да направя това или мога да насоча координатите на картата и всички те да съществуват на една страница?


jquery tooltip qtip jquery-tooltip
person user1269988    schedule 25.05.2012    source източник
comment
Защо просто не накарате зоните на картата да покриват страната, както и червената карфица? Щифтовете са близо до зоните на страната, така че трябва да можете лесно да промените зоната на картата, за да покриете и двете.   -  person Tim Hobbs    schedule 26.05.2012

Отговори (1)


arrow_upward
0
arrow_downward

Трябва да можете да използвате събитие 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-pointers. Не съм използвал qtip, така че третирайте горния код като псевдокод. Надяваме се, че е полезно за решаването на вашия проблем.

person christurnerio    schedule 26.05.2012
comment
благодаря, че работи страхотно! Току-що добавих вашия код и поставих идентификатора в координатите на картата: ‹area id=italy alt=Рим, Италия shape=rect coords=282,68,306,115 href=# /› и изглежда добре. - person user1269988; 26.05.2012