Javascript 如何为文本中的元素指定唯一的单击事件？

我想要的是：

当我单击什么？文本时，工具提示将显示文本“继续”，但我希望工具提示显示在什么？文本上，而不是继续文本上

当我点击工具提示时，我希望它消失，我的意思是当我点击文本“嘿嘿”时，它消失了，但当我点击工具提示时，它不会消失。如何将其设置为“工具提示”类而不是“关闭”类 谢谢。 为了更好地理解，我在这里添加了我的工作

$（文档）.ready（函数（）{
$（“.content a”）。单击（函数（）{
var obj=$（本）；
变量工具提示=对象数据（“工具提示”）；
对象附加（“”+工具提示+“”）；
});
$（this.mousemove（function（））{
var x=$（“.text”）.position（）；
$（“.tooltip”）.css({
“顶级”：x.top-35，
“左”：x.左-35
});
});
$（“.close”）。单击（函数（）{
$（“.tooltip”）.hide（）；
});
});
正文{
保证金：自动；
字体：14px/22px Arial；
背景：#ddd
}
.内容{
宽度：500px；
利润率：10px自动；
背景：#fff；
边框：5px实心#eee；
填充：10px
}
.内容a{
颜色：#fa6578
}
.工具提示{
位置：绝对位置；
排名：0；
左：0；
z指数：3；
背景：#333；
填充物：5px；
颜色：#fff
}

嘿嘿，等等等等
您必须在单击的锚定位置上调整样式设置：

$(".tooltip").css({
  "top" : obj.position().top - 35,
  "left" : obj.position().left - 35
}); 

您还需要在工具提示的单击事件中使用事件委派
on（）
，因为它将动态添加到DOM中：

$("body").on('click', ".tooltip", function() {
    $(".tooltip").hide();
});

注意：不需要
mousemove
事件

希望这有帮助


$（文档）.ready（函数（）{
$（“.content a”）。单击（函数（）{
var obj=$（本）；
变量工具提示=对象数据（“工具提示”）；
对象附加（“”+工具提示+“”）；
$（“.tooltip”）.css({
“顶部”：目标位置（）.顶部-35，
“左”：对象位置（）.左-35
}); 
}); 
$（“body”）。在（'click'，.tooltip'，function（）上{
$（“.tooltip”）.hide（）；
}); 
});
正文{
保证金：自动；
字体：14px/22px Arial；
背景：#ddd
}
.内容{
宽度：500px；
利润率：10px自动；
背景：#fff；边框：5px实心#eee；
填充：10px
}
.内容a{
颜色：#fa6578
}
.工具提示{
位置：绝对位置；
排名：0；
左：0；
z指数：3；
背景：#333；
填充物：5px；
颜色：#fff
}

嘿嘿
呜呜呜呜
您必须在单击的锚定位置上调整样式设置：

$(".tooltip").css({
  "top" : obj.position().top - 35,
  "left" : obj.position().left - 35
}); 

您还需要在工具提示的单击事件中使用事件委派
on（）
，因为它将动态添加到DOM中：

$("body").on('click', ".tooltip", function() {
    $(".tooltip").hide();
});

注意：不需要
mousemove
事件

希望这有帮助


$（文档）.ready（函数（）{
$（“.content a”）。单击（函数（）{
var obj=$（本）；
变量工具提示=对象数据（“工具提示”）；
对象附加（“”+工具提示+“”）；
$（“.tooltip”）.css({
“顶部”：目标位置（）.顶部-35，
“左”：对象位置（）.左-35
}); 
}); 
$（“body”）。在（'click'，.tooltip'，function（）上{
$（“.tooltip”）.hide（）；
}); 
});
正文{
保证金：自动；
字体：14px/22px Arial；
背景：#ddd
}
.内容{
宽度：500px；
利润率：10px自动；
背景：#fff；边框：5px实心#eee；
填充：10px
}
.内容a{
颜色：#fa6578
}
.工具提示{
位置：绝对位置；
排名：0；
左：0；
z指数：3；
背景：#333；
填充物：5px；
颜色：#fff
}

嘿嘿
呜呜呜呜
实际上您不需要用jquery设置位置，您可以将
设置为相对父级；对于
close
操作，请在工具提示上使用相同的类：


$（文档）.ready（函数（）{
$（“.content a”）。单击（函数（）{
$（“.tooltip”）.hide（）；
var obj=$（本）；
变量工具提示=对象数据（“工具提示”）；
对象附加（“”+工具提示+“”）；
});
$（“body”）。在（'click'，'close'，function（）上{
$（“.tooltip”）.hide（）；
});
});
正文{
保证金：自动；
字体：14px/22px Arial；
背景：#ddd
}
.内容{
宽度：500px；
利润率：10px自动；
背景：#fff；
边框：5px实心#eee；
填充：10px
}
.内容a{
颜色：fa6578；
位置：相对位置；
}
.工具提示{
位置：绝对位置；
最高：100%；
左：50%；
宽度：100%；
z指数：3；
背景：#333；
填充物：5px；
颜色：#fff
}

嘿嘿，等等等等
实际上您不需要用jquery设置位置，您可以将
设置为相对父级；对于
close
操作，请在工具提示上使用相同的类：


$（文档）.ready（函数（）{
$（“.content a”）。单击（函数（）{
$（“.tooltip”）.hide（）；
var obj=$（本）；
变量工具提示=对象数据（“工具提示”）；
对象附加（“”+工具提示+“”）；
});
$（“body”）。在（'click'，'close'，function（）上{
$（“.tooltip”）.hide（）；
});
});
正文{
保证金：自动；
字体：14px/22px Arial；
背景：#ddd
}
.内容{
宽度：500px；
利润率：10px自动；
背景：#fff；
边框：5px实心#eee；
填充：10px
}
.内容a{
颜色：fa6578；
位置：相对位置；
}
.工具提示{
位置：绝对位置；
最高：100%；
左：50%；
宽度：100%；
z指数：3；
背景：#333；
填充物：5px；
颜色：#fff
}

嘿嘿，等等等等
您需要设置工具提示相对于所单击元素的位置。您可以在$（“.content a”）.click（）方法中轻松地获得此信息

对于第二个问题，您可以使用事件委派，因为tooltip元素将动态附加到DOM中


$（文档）.ready（函数（）{
var x；
$（“.content a”）。单击（函数（）{
var obj=$（本）；
变量工具提示=对象数据（“工具提示”）；
$（“.tooltip”）.remove（）；
对象附加（“”+工具提示+“”）；
x=$（this）.pos