Javascript 使用鼠标悬停配置文件图片时带有箭头的工具提示框

我正在制作一个包含个人介绍文本的工具提示框，我的目标是一个带有箭头的工具提示框，如果我使用鼠标悬停在个人资料图片上。。。。。。。。。我在网上尝试过一些方法，但都不可行。。。。。。有人能帮我吗

。工具提示{
显示：无；
位置：绝对位置；
边框：1px实心#333；
背景色：#161616；
边界半径：5px；
填充：10px；
颜色：#fff；
字体大小：12px Arial；
}

如我在上面的评论中所述，您的css类是tooltip，但您使用的是class=“masterTooltip”，加上光标类型也丢失了

只需检查以下代码，即可正常工作，您可以根据需要进行修改：

文件
.工具提示{
边框底部：1px虚线#000000；颜色：#000000；轮廓：无；
光标：帮助；文本装饰：无；
位置：相对位置；
}
.工具提示范围{
左边距：-999em；
位置：绝对位置；
}
.工具提示：悬停范围{
边框半径：3px 3px；-moz边框半径：3px；-webkit边框半径：3px；
长方体阴影：3px 3px rgba（0,0,0,0.1）；-webkit长方体阴影：3px 3px rgba（0,0,0,0.1）；-moz长方体阴影：3px 3px rgba（0,0,0,0.1）；
字体系列：Calibri，塔荷马，日内瓦，无衬线；
位置：绝对；左侧：1米；顶部：2米；z指数：99；
左边距：0；宽度：210px；
}
.classic{填充：0.5em 1em；}
*HTMLA:hover{background:transparent；}
.classic{背景：#007DC3；边框：1px实心#FFAD33；颜色：#fff；}
< /代码> 您可以更改它的显示方式，并考虑在照片旁边显示一个稳定的位置来显示“工具提示”< /P>

$（.masterTooltip”）。打开（“鼠标悬停”，函数（事件）{
$（“.tooltip”）.remove（）；
var TooltipTitle=$（this.attr（“工具提示标题”）；
var tooltip=$（“”，{class:“tooltip”，html:TooltipTitle，css:{top:event.pageY，left:event.pageX}）；
$（“正文”）.append（工具提示）；
tooltip.fadeIn（）；
});
$（.masterTooltip”）。在（“鼠标移动”，函数（事件）{
$（“.tooltip”）.fadeOut（）；
});
。工具提示{
显示：无；
位置：绝对位置；
边框：1px实心#333；
背景色：#161616；
边界半径：5px；
填充：10px；
颜色：#fff；
字体大小：12px Arial；
}

您的css类是tooltip，但您正在使用class=“masterTooltip”我在css中没有看到任何光标。。。。使用类似游标的东西：帮助；您可能不应该在html属性中放入那么多数据。。。这将使维护/可读性成为一个难题，除非使用某种模板引擎。更不用说，如果文本最后使用引号，可能会出现破损。@Just_Do_您能帮助我了解更多详细信息吗？@Farhad Bagherlo，但箭头仍然无法与工具提示框一起显示；（只有代码转储的答案对教学没有帮助。请解释您添加/更改了什么，为什么这些添加/更改会起作用，等等。我已经在我的评论中说过，我也会用它们更新我的ans。）