Можно установить заголовок для каждой области.
Но во всплывающих подсказках не может быть изображения в чистом виде html.
Посмотрите на этот фрагмент в качестве примера:
<img src="https://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" title="sun">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" title="mercury">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" title="venus">
</map>
Если вы все еще хотите, чтобы у них было изображение, вы можете сделать это с некоторыми библиотеками, такими как Jquery Подсказки. Смотрите пример здесь: https://codepen.io/jeprubio/pen/bGdGaam. В этом случае вам понадобятся дополнительные файлы javascript и css (как вы можете видеть в настройках кодового маркера).
Обновление
Вы можете увидеть здесь также приведен пример кода со всем кодом в одном html:
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https:////maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
img {
margin: 10px;
}
.ui-tooltip {
max-width: 350px;
}
</style>
</head>
<body>
<img src="https://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" title="sun <img src='https://image.shutterstock.com/image-vector/sun-icon-jpg-260nw-416254921.jpg' height='100'>">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" title="mercury <img src='https://solarsystem.nasa.gov/system/stellar_items/image_files/2_feature_1600x900_mercury.jpg' height='100'>">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" title="venus <img src='https://cdn.mos.cms.futurecdn.net/dzxtQ2dXH9SVKztJTbAXSA-320-80.jpg' height='100'>">
</map>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js" type="text/javascript"></script>
<script>
$( function() {
$( document ).tooltip({
items: "[title]",
content: function() {
var element = $( this );
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
}
}
});
});
</script>
</body>
</html>