Using Tippy with an image
May 28th, 2011
|
Tippy WordPress Plugin
|
12 Comments

If you want to have a Tippy tooltip pop up over an image, you will have to manually format your link. Here’s how:

<a id="tippy_tipSample0"
   class="tippy_link"
   title="Your Tooltip Title"
   href="http://croberts.me/wp-content/uploads/2011/05/giraffe.jpg"
   onmouseover="Tippy.loadTipInfo('Your Tooltip Text', 0, 0, 'tippy_tipSample0', event);"
   onmouseout="Tippy.fadeTippyOut();">

   <img border="0" src="http://croberts.me/wp-content/uploads/2011/05/giraffe.jpg" />
</a>

Note that if you have Tippy set to display the tooltip under a link, it will pop up underneath the image.

Trackback URL: http://croberts.me/2011/05/28/using-tippy-with-an-image/trackback/
Short link: http://tcnr.me/u
12 comments
1.
Scott
June 2, 2011 at 1:54 am
 

Hi Chris!
Awesome plugin, thanks!
One thing that is driving me crazy… I can’t seem to get html links to work in the tool tip text area for this particular example. Any pointers?

 
2.
Chris Roberts
June 2, 2011 at 1:33 pm
 

Hi Scott, thanks for the question. If you are adding Tippy to an image and thus manually format the link as I do above, you need to be sure to use HTML entities for any links within the tooltip. For instance, if I wanted to add a link to the NY Times in my above example, it would look like:

<a id="tippy_tip0" class="tippy_link" onmouseover="domTip_toolText('tip0', 'Your Tooltip Text - Visit &lt;a href=&quot;http://www.nytimes.com/&quot;&gt;The New York Times&lt;/a&gt;', 'Your Tooltip Title', '', 0, 0, 'tippy_tip0', event);" onmouseout="domTip_fadeTipOut();"><img border="0" src="http://croberts.me/wp-content/uploads/2011/05/giraffe.jpg" /></a>
 
3.
Billy
June 23, 2011 at 1:36 pm
 

Hi chris, thanks for your work on this plugin. I am trying to use html tooltips with an image map, and was wondering if there was a way to use tippy for this?

 
4.
Chris Roberts
June 23, 2011 at 2:37 pm
 

Billy,

Good question, I’ve not tried that before but have now played with it some. As it stands now, there are some possible quirks with using imagemaps, though there are ways around it. I’ve just tweaked Tippy to address some of those quirks and will push out an update later. Once I’ve released the update (probably later today) I’ll do a post on using Tippy with an imagemap.

If you want to start playing with it yourself, just make sure you set up Tippy to position the tooltip under the mouse instead of under the link. For imagemaps, the tooltip will display at the top left of the screen if Tippy is set to display under the link. I’ll have a fix (of sorts) for this in Tippy 3.5.3.

In your imagemap code, for each area element, add an onmouseover and onmouseout similar to what you see in the example above. Also, in the area element add a title attribute if you want the tooltip to display a header.

 
5.
Scott
July 8, 2011 at 4:07 pm
 

Hi Chris!
Thanks so much for the help… I got the links working inside the text area per your instructions.

Any progress on Billy’s question about using Tippy with image maps? I am trying everything I can think of (I’m so close I can practically taste it!) but I have a feeling my syntax is wrong.

Thanks again for your excellent work and take care.

-Scott

 
6.
Michael Lanning
July 27, 2011 at 8:45 am
 

Hi Chris.
In the example above, where you have the link to the ny times, is there a way to turn off the header?

 
7.
Michael Lanning
July 27, 2011 at 8:11 pm
 

I think figured it out…

title=”"

That gets rid of it.

 
8.
Gareth
September 15, 2011 at 8:38 am
 

Hi guys can you post instructions, examples of using tippy and image maps together?

Many thanks

Gareth

 
9.
Chris Roberts
September 15, 2011 at 12:56 pm
 

Gareth,

I’ve not played with image maps much, but I may take some time later to fiddle with image maps and Tippy to get a brief tutorial up.

 
10.
Jay
October 24, 2011 at 9:02 pm
 

Hi there – great work on this! Is there a way to eliminate the blue link line under the graphic when I do this?

Thanks,
Jay

 
11.
Ben
March 8, 2012 at 10:28 am
 

Hi Chris,
Great plugin. In previous versions, the Tooltip Title would display above the Tooltip Text in a grey box. I have noticed that with the latest update these titles have gone away on my site and with your giraffe image. Is there any way that I can bring them back? Thanks.

 
12.
Chris Roberts
March 8, 2012 at 4:49 pm
 

Ben,

Sounds like you are describing the popup your browser generates based on the title attribute on links. Tippy has an option that lets you turn that title attribute on or off – some people find the box obtrusive.

I just visited the site linked to your name and noticed that the title popups are showing, so I guess you figured out the issue?

 

Add a Comment

Please provide the following information. Fields marked with * are required. Your email address will be kept private. The following tags may be used: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> .
*
*