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.

My 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;
 }

My html code:

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

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.

回答1:

If you mean you want to style the tooltip you'll need to use javascript to create the functionality. What script you use depends on what JS framework you're using, if any.

There's a big list of tooltips on this site : http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

Uses different frameworks, so pick the one that works for you.

回答2:

I would use a common library like jQuery. There are a lot of running examples: http://jquery.bassistance.de/tooltip/demo/

回答3:

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).

This will get you started on jQuery tooltip plugins.

来源：https://stackoverflow.com/questions/5375996/how-to-add-an-image-to-tool-tip-using-javascript

标签

html

css

tooltip