自定义<img title=""/>工具提示

Question

我想知道在img标签中设置title属性后我们可以自定义工具提示吗？现在我得到一个带有蓝色背景的标准矩形，上面有文字，我想要的是我自己的图像（让我们说看起来像云的东西），上面有文字。有可能用css或js吗？

Answer 1

你需要javascript。试试this here或here 或者你可以自己动手。但基本上没有办法直接在html中做（不知道htm5 / css3）。

Answer 2

创建自己的！您只需在HTML中创建一个隐藏的div，然后当有人将鼠标悬停在图像上时，请显示您的div。

Answer 3

如果您想创建自定义工具提示，我建议this。它详细地向您展示了如何在js中创建自己的工具提示，这些工具提示是CSS驱动的并且可以轻松地重复使用。

此外，如果您使用的是框架，事情变得更加容易。例如，有许多jQuery tooltip plugins。这些允许您在任何元素的鼠标悬停时显示工具提示。

Answer 4

我会推荐Tooltipster。非常容易使用，可用于支持title属性的任何元素，并具有许多很酷的功能和外观。