如何使用JavaScript将图像添加到工具提示？ [英] How to add an image to tool tip using javascript?

问题描述

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

How can I show an image as a tool tip in my web page. I want my tool tip in a custom image, rather than the usual one. I tried defining a class to hold the image and added the class to the anchor element, but I did not get the image. Someone help me.

我的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代码：

My html code:

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

questionIcon类拥有问号图片。在悬停在问号上时，我需要在图像内部显示工具提示。该图像只是一个带有边框的白色框。

The questionIcon class hold a 'question mark' image. On hovering on the question mark, I need the tool tip to be displayed inside the image. The image is just a white box with borders.

推荐答案

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

最简单的方法是使用一些插件（如果您使用的是类似jQuery的东西），它提供丰富的工具提示功能。浏览器只能显示在 alt 属性（图片 elemnt）或 title 属性（包括 image ）。

Browsers don't support rich tooltips but it can still be done

The easiest way is to use some plugin (if you're using something like jQuery) that provides rich tooltips functionality. Browsers can only display text that's defined in alt attribute (of image elemnt) or title attribute in any other HTML element (including image).

这会让你开始在 jQuery工具提示插件上。

这篇关于如何使用JavaScript将图像添加到工具提示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！