Как создать всплывающую подсказку html поверх карты изображений?

Question

У меня есть следующий код:

<div style="width:100%" align="center">
    <img   src="./platform-logos-big.png" alt="Icons of platforms we support: Windows Linux and MacOS X" border="0" align="middle" usemap="#Map">
    <map name="Map">
        <area shape="rect"  coords="0,0,87,100" href="#Linux" alt="Click here to download Linux version of CloudClient">
        <area shape="rect" coords="88,0,195,100" href="#Windows" alt="Click here to download Windows version of CloudClient">
        <area shape="rect" coords="196,0,300,100" href="#MacOsX" alt="Click here to    download MacOsX version of CloudClient">
    </map>
</div>
<div class="WTT">
tooltipWin
</div>
<div class="LTT">
tooltipLin
</div>
<div class="MTT">
tooltipMac
</div>

Я хочу, чтобы подсказки моего чистого HTML-инструмента появлялись поверх мыши и перемещались по нему.Как это сделать с помощью jQuery?

Answer 1

На самом деле вы должны дать общий класс всем подсказкам и id для всех элементов, но это работает против вашего существующего HTML.

$('.WTT,.LTT,.MTT').css({
    position: 'absolute'
}).hide()
$('area').each(function(i) {
    $('area').eq(i).bind('mouseover', function(e) {
        $('.WTT,.LTT,.MTT').eq(i).css({
            top: e.pageY,
            left: e.pageX
        }).show()
    })
    $('area').eq(i).bind('mouseout', function() {
        $('.WTT,.LTT,.MTT').hide()
    })
})

скрипка здесь: http://jsfiddle.net/billymoon/BmxR7/

Answer 2

Наклейте title="your tooltip" на свой area тег.

Answer 3

У вас есть различные варианты здесь:

http://wiki.jqueryui.com/w/page/12138112/Tooltip

РЕДАКТИРОВАТЬ: Эта ссылка может также помочь: http://docs.jquery.com/Plugins/Tooltip#Delay_and_tracking

Answer 4

Что касается использования jQuery UI для карты> область> всплывающая подсказка, вам нужно добавить:

$("area").tooltip({ track: true });

И, стиль:

.ui-tooltip { }