there is no need for javascript, image map or title attribute. :D
Instead, we can just let CSS take the strain...
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS tooltip example</title>
<style media="screen">
#dmwhipp {
position:relative;
width:890px;
height:779px;
padding:0;
margin:0 auto;
background-image:url(http://cisflorida.org/graphics/model/model-min.gif);
list-style-type:none;
}
#dmwhipp li {
position:absolute;
}
#dmwhipp li:hover div {
display:block;
}
#dmwhipp a {
display:block;
width:77px;
height:77px;
border-radius:50%;
}
#dmwhipp div {
display:none;
position:absolute;
box-sizing:border-box;
width:216px;
height:166px;
padding:10px;
border:1px solid #b7d6e9;
border-radius:10px;
background-color:#fff;
background-image:linear-gradient(to bottom,#fff,#b7d6e9);
box-shadow:inset 0 0 20px #999,4px 4px 4px #999;
color:#669;
}
#one {
top:240px;
left:521px;
}
#one div {
top:143px;
right:44px;
}
#two {
top:353px;
left:633px;
}
#two div {
top:29px;
right:156px;
}
#thr {
top:494px;
left:659px;
}
#thr div {
top:-112px;
right:182px;
}
#fou {
top:494px;
left:158px;
}
#fou div {
top:-112px;
left:180px;
}
#fiv {
top:353px;
left:181px;
}
#fiv div {
top:29px;
left:157px;
}
#dmwhipp h6 {
margin:10px 0;
text-align:center;
text-transform:uppercase;
}
#dmwhipp p {
font-size:75%;
}
</style>
</head>
<body>
<ul id="dmwhipp">
<li id="one">
<a href="#"></a>
<div>
<h6>assessment</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet.
</p>
</div>
</li>
<li id="two">
<a href="#"></a>
<div><h6>planning</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet.
</p>
</div>
</li>
<li id="thr">
<a href="#"></a>
<div>
<h6>support</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet.
</p>
</div>
</li>
<li id="fou">
<a href="#"></a>
<div><h6>monitoring</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet.
</p>
</div>
</li>
<li id="fiv">
<a href="#"></a>
<div>
<h6>evaluation</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet.
</p>
</div>
</li>
</ul>
</body>
</html>