Style title tooltip in image mapping

Question

I am extremely new to html coding. I have some knowledge, but not too much. I am creating an info graphic for tractor models. I am heatmapping using < map > and < area shape, coords, href, alt, title > I have that part complete. However, I am trying to edit the tooltip for the title. I would like to user to hover over the model and have information about that model appear, then be able to click to the related page on our website. I have tried many solutions I have found to no avail. It may change the tooltip, but it would appear at the top of the page instead of next to the hyperlink. I don't know enough about the code to fix the issue. Everything I keep finding uses which is not in my code. Can somebody help me change the tooltip style/appearance for the title in the map? Thanks!

<img src="mapping.jpg" width="2550" height="1650" alt="Image Map" usemap="#map"/>
<map name="map">
<area shape="rect" coords="369,345,436,384" href="#"; alt="coord 1" title="tooltip 2">
<area shape="rect" coords="697,344,765,388" href="#" alt="coord 2" title="tool tip 1">
</map>

What have you tried so far, and why hasn't it been a good solution? — Adam, Apr 13 '17 at 20:32
I have been using Dreamweaver. I have this mapping so far: ' — Krista, Apr 14 '17 at 12:02
I have tried styling the 1 tag but it isn't in an a tag. i tried using this website: https://jqueryui.com/tooltip/#custom-animation but i really didn't understand what it was doing. I tried putting the a tag and the id in front of my area code since that is where the tooltip was at but that didnt fix it either. I also tried http://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute-inside-the-anchor-tag AND http://stackoverflow.com/questions/15175312/increase-font-size-of-hyperlink-text-html I really tried a lot that I could find but did not result in success — Krista, Apr 14 '17 at 12:10
Edit your question to include your code, posting it in a comment makes it tough to read. Image maps are pretty outdated, they still work, but really you shouldn't use them if you can avoid it. — Adam, Apr 16 '17 at 23:07
I edited the question. I know image mapping is outdated, but I am really don't know how else to accomplish what I want. Image mapping is what I found that would do what I want. — Krista, Apr 17 '17 at 12:15
[I created a codepen, to test](https://codepen.io/anon/pen/PmqgmK?editors=1000). I put blue boxes next to the area that has the tooltip. It seems to work fine for me when using Chrome. What browser is it not working for? Does that codepen work for you? — Adam, Apr 17 '17 at 15:04
The regular tooltips works just fine. I want to customize them to look differently, so attention is drawn to them instead of it looking like a normal tooltip. — Krista, Apr 17 '17 at 17:50
You can't style the tooltip, is built into the browser. You can make your own, [try looking at this answer for an example of how to do that.](http://stackoverflow.com/a/8788410/1769777) — Adam, Apr 17 '17 at 17:57

Style title tooltip in image mapping

0 Answers0