Contact US

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

HTML/CSS Image map with multiple tool-tips

HTML/CSS Image map with multiple tool-tips

HTML/CSS Image map with multiple tool-tips

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 !!

RE: HTML/CSS Image map with multiple tool-tips

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


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

RE: HTML/CSS Image map with multiple tool-tips


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.

RE: HTML/CSS Image map with multiple tool-tips

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.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close