将鼠标悬停在图像部件上可显示提示

Question

I have an html page with simple, static image like this : Image

I need a way that putting mouse (hover) on any object, for example - "BED" to get a tooltip that - "There is bed".

I know how hover works at pure html, with blocks or any teg, but I need a way of doing/tracking the user cursor, and when it enters in specific zone, to show the hint. Probably some JS required. How can I setup this unknown geometric forms with their coordinates to achieve my goal?

Answer 1

No JS script needed :)

You can use image maps .. they are old but should work as you expected.. you can run it and see title when you hover over kitchen and bad

I used this webpage to 'generate' rectangles and area over the image or hotsports..

 <img src="https://www.edrawsoft.com/symbols/simple-home-floorplan.png" usemap="#image-map"> <map name="image-map"> <area target="" alt="This is bad" title="This is bad" href="" coords="520,132,451,48" shape="rect"> <area target="" alt="This is kitchen" title="This is kitchen" href="" coords="343,204,254,55" shape="rect"> </map> 

Answer 2

In addition of the prev answer you can also add this jQuery to your page. It makes the tooltip show more prominent and also quicker:

$( function() {
  $( document ).tooltip();
} );

This native jQuery function uses the 'title' attribute! Don't forget to add these like this:

<img title='This is a test!!' src='test.png'>