Question

如何在我的网页中将图像显示为工具提示。我希望我的工具提示在自定义图像中，而不是通常的图像。我尝试定义一个类来保存图像并将类添加到锚元素，但我没有得到图像。有人帮助我。

我的css：

 .bubbleText{
background:transparent url(../images/static/link_hover_M_120.png) no-repeat;
  }

 .questionIcon{
background: url(../images/static/question2.png) no-repeat;
text-decoration:none;
 }

我的HTML代码：

 <a title="Your Contact number" href="#" class="questionIcon bubbleText">&nbsp;</a>

questionIcon类包含“问号”图像。悬停在问号上时，我需要在图像内显示工具提示。图像只是一个带边框的白框。

Answer 1

如果您想要设置工具提示的样式，则需要使用javascript来创建功能。你使用什么脚本取决于你正在使用的JS框架，如果有的话。

此网站上有大量工具提示：http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

使用不同的框架，因此选择适合您的框架。

Answer 2

浏览器不支持丰富的工具提示，但仍可以完成

最简单的方法是使用一些插件（如果你使用jQuery之类的东西）提供丰富的工具提示功能。浏览器只能在任何其他HTML元素（包括alt）中显示image属性（title elemnt）或image属性中定义的文本。

这将让您开始jQuery tooltip plugins。

Answer 3

我会使用像jQuery这样的通用库。有许多正在运行的示例：http://jquery.bassistance.de/tooltip/demo/

如何使用javascript将图像添加到工具提示？

3 个答案:

浏览器不支持丰富的工具提示，但仍可以完成