Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

HTML/CSS Image map with multiple tool-tips

Status
Not open for further replies.

jizzer

Instructor
Sep 26, 2011
9
US
Hello
I am doing a mishmash of HTML and CSS to do the following:
I have a single photo being used as an image map. The photo shows a dozen or more people, and I want to show a tool-tip as I hover over each person. I mapped the people out fine, the tool-tips appear fine, just next to the overall image, not on it. Can someone give me a pointer on changing the position of the tool-tip container ? Ideally, I would like it to appear at the cursor location, but can't seem to get it there. You can see my test page at:
Thanks so much for suggestions !!
 
Beware that hover actions may be an accessibility issue with users of devices that do not hover (tablets).

You could add a title to the area tags (title="Janet").

HTML:
<span class="tooltip">
<area shape="POLY" coords="753,635,707,545,736,503,721,433,768,359,788,353,789,289,821,259,852,265,869,296,855,331,847,349,893,389,905,409,914,544,861,595,850,643,753,635" href="#" title="Janet">
<span class="tooltiptext">Janet</span></span>
 

Thanks - as you know, it worked perfectly. It is not as pretty as the tool-tip I spent hours on, but it works better for what I wanted. Thanks again.
 
There are still many ways to style the tooltip presentation (example). However, as many people use touch devices now, the hover action is not typically worth the development investment. A JS action on click/touch would be better.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top