1

我不知道如何将我创建的自定义工具提示连接到图像映射。基本上，我不知道在我的区域标签中放置什么来调用工具提示功能。我尝试过的所有东西都不起作用，或者它显示在默认工具提示中。如果有人想查看它，我已经在 jsFiddle 上创建了一个示例。所有帮助将不胜感激！

这是示例，http://jsfiddle.net/edocurug15/yNAsy/

$(document).ready(function () {
//Tooltips
$(".tip_trigger").hover(function () {
    tip = $(this).find('.tip');
    tip.show(); //Show tooltip
}, function () {
    tip.hide(); //Hide tooltip        
}).mousemove(function (e) {
    var mousex = e.pageX + 20;
    var mousey = e.pageY + 20;
    var tipWidth = tip.width();
    var tipHeight = tip.height();

area title="This is the left eye" shape="rect" coords="373,365,404,402" href="#"

我在我的区域标签中放了什么来显示工具提示？？？

4

2 回答 2

1

您可以通过使用事件目标从触发事件的区域获取文本来做到这一点。

$(".tip_trigger").hover(function (e) {
    tip = $(this).find('.tip');
    var tipText = $(e.target).attr('title');
    tip.html(tipText);
    tip.show(); //Show tooltip
}

看到这个更新的小提琴：http: //jsfiddle.net/yNAsy/3/

于 2013-01-30T00:46:01.643 回答
0

您的小提琴中缺少一些代码（例如 example.js 和具有类“tip”的元素）。您应该对区域使用悬停（mouseenter、mouseleave）事件，并将标题属性复制到您的元素中，并使用“tip”类。

$("area").hover(function () {
    console.log("hover");
    $(".tip").html($(this).attr("title"));
}
于 2013-01-30T00:38:22.610 回答