Текст при наведении в maphighlight.js

[ZHMEN]

Здравствуйте!
Есть скрипт подсветки области maphighlight.js.
В общем-то все работает, но нужно как-то сделать, чтобы при наведении так же появлялся текст.
К сожалению, изображение не в svg.
Помогите, плз, решить проблему!
Заранее премного благодарен!
Мой код:

Сам js скрипт во вложении:

 

[alex_me]

1. Вместо alt и title добавить идентификатор этажа и какое-нибудь описание. Например

<area data-floor="1" data-desc="Подвальный этаж" .... >

2. Повесить на area подсказку. Например, qtip

$('.map area').each(function() {
    var data = $(this).data();
    $(this).qtip({ 
        content: {
            title: 'Этаж № ' + data.floor,
            text: data.desc
        }
    });
});

Для просмотра ссылки Войди или Зарегистрируйся

 

[ZHMEN]

1. Вместо alt и title добавить идентификатор этажа и какое-нибудь описание. Например

<area data-floor="1" data-desc="Подвальный этаж" .... >

2. Повесить на area подсказку. Например, qtip

$('.map area').each(function() {
    var data = $(this).data();
    $(this).qtip({
        content: {
            title: 'Этаж № ' + data.floor,
            text: data.desc
        }
    });
});

Для просмотра ссылки Войди или Зарегистрируйся

Спасибо за наводку. Но мне бы просто текст выводить на подсветках. И так же нужно, чтобы, например сделать "Текст 1" в одном месте, "Текст 2" в другом.

 

[alex_me]

<area data-floor="1" data-desc="Текст 1 в одном месте" .... >
<area data-floor="2" data-desc="Текст 2 в другом" .... >

 

[ZHMEN]

<area data-floor="1" data-desc="Текст 1 в одном месте" .... >
<area data-floor="2" data-desc="Текст 2 в другом" .... >

Что-то не получается (. Судя по всему что-то не так делаю...
Вот код:

 

[alex_me]

1. События для подсказок нужно тоже завернуть в document onready.
Обработчик просто не увидит селектор в dom

2. Селектор area не тот - $('.map area').
Пользуйся BEM и путаницы с селекторами не будет

<link rel = "stylesheet" type = "text/css" href = "jquery.qtip.css" />
<script type = "text/javascript" src = "jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery.maphilight.js"></script>
<script type="text/javascript" src="jquery.qtip.js"></script>

<script type="text/javascript">
    $(function () {
        $('.Map-CanvasContainer').maphilight();

        $('#squidheadlink').mouseover(function (e) {
            $('#squidhead').mouseover();
        }).mouseout(function (e) {
            $('#squidhead').mouseout();
        }).click(function (e) {
            e.preventDefault();
        });

        $('.Map-Area').each(function () {
            var data = $(this).data();
            $(this).qtip({
                content: {
                    title: 'Этаж № ' + data.floor,
                    text: data.desc
                }
            });
        });
    });
</script>

<div class="Map">
    <div class="Map-CanvasContainer" style="background: url(front_final_post1.png); display: block; position: relative; padding: 0px; width: 1167px; height: 933px; ">
        <canvas class="Map-Canvas"></canvas>
        <img class="Map-Image maphilighted" src="front_final_post1.png" width="1167" height="933"  usemap="#simple">
    </div>
    <map class="Map-Map" name="simple">
        <area class="Map-Area" data-floor="1" data-desc="Текст 1 в одном месте" href="#" shape="poly" coords="72,297,54,329,1114,330,1093,294" data-maphilight="{&quot;stroke&quot;:false, &quot;fillColor&quot;:&quot;6AA8FE&quot;,&quot;fillOpacity&quot;:0.6}">
    </map>
</div>

Для просмотра ссылки Войди или Зарегистрируйся