Как вывести всплывающую подсказку при наведении курсора на регион карты?

#html #css #svg #css_animation

У меня есть, допустим, карта США. 





   


    

  





Необходимо при наведении курсора на определенный штат, окрасить его и вывести подсказку
с информацией об этом штате.

P.S 
Карта неполная, всего несколько штатов, так как есть ограничение - не больше 30.000
символов в сниппете
    

Ответы

Ответ 1

Для вывода подсказок можно применить тег SVG   

Если вы хотите реализовать вывод подсказки, например, какого-то участка карты,
то необходимо обернуть path, который рисует этот участок групповым тегом .  

И разместить внутри него двойной тег  
      







   


    

  





Note:

Если у вас не будет работать всплывающая подсказка, обязательно проверьте отсутствие
стиля pointer-events:none; так как при этом происходит отключение событий мыши.

Связанные вопросы:   


Как создать многострочный tooltip в SVG    


Как при наведении курсора на один из элементов SVG добиться, чтобы он
поднялся выше других элементов