目前我有一个用 raphael 创建的竞技场地图,地图上的每个 svg 元素在悬停时都有一个工具提示。工具提示不会在 svg 元素的第一次悬停时显示,但如果用户再次输入 svg 元素,它将显示。
我认为这与我的 addTip“mouseeneter”函数有关,但我对 JS 的理解仍然很陌生,所以我不确定。这是我用于在悬停时将工具提示添加到 svg 元素的代码,我使用的代码基于此stackoverflow 论坛问题和我创建的 jsfiddle链接
var tip = $("#tip").hide();
var tipText = "Tip the Canoe.";
var over = false;
function addTip(node, txt)
{
$(node).mouseenter(function(){
tipText = txt;
tip.fadeIn();
over = true;
})
.mouseleave(function(){
tip.fadeOut();
over = false;
});
}
for (var i = 0, len = rsrGroups.length; i < len; i++) {
var el = rsrGroups[i];
el.mouseover(function() {
addTip(this.node, tipText);
console.log(node);
this.toFront();
this.attr({
cursor: 'pointer',
fill: '#990000',
});
//alert('test');
});
el.mousemove(function(e){
if (over){
tip.css("left", e.clientX+20).css("top", e.clientY+20);
tip.text(tipText);
}
});
el.mouseout(function() {
this.attr({
fill: '#003366'
});
});
el.click(function() {
this.attr({
fill: 'green'
});
});
}