使用shape =“circle”的图像映射..在悬停功能上添加弹出框

Question

我的另一个初级问题。

我已经创建了一个图像映射。图片在这里http://expirebox.com/download/3ff3e2aff88b5eee773abce55c8caa03.html，但理解这个问题并不重要。

HTML：

 

body {
  margin: 0;
  padding: 0;
  background-color: #F0641D;
  font-family: "Trebuchet MS", sans-serif;
  color: #c4c4c4;
}
a {
  color: #F0641D;
  text-decoration: none;
}
#heading {
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 20px;
}
#header {
  width: 100%;
  height: 64px;
  background-color: #383838;
}
#header_content {
  width: 1000px;
  margin: 0 auto;
}
#header_content div {
  float: left;
}
#header_logo {
  width: 114px;
  height: 64px;
  background-color: #505050;
}
#header_navbar {
  width: 772px;
  text-align: center;
}
#header_navbar div {
  float: none;
  display: inline-block;
  margin-right: -5px;
  border-bottom: 4px solid #505050;
  transition: border-bottom 0.5s linear, background-color 0.5s linear;
}
#header_navbar div a {
  display: block;
  font-size: 25px;
  padding: 15.5px 25px;
}
#header_navbar div:hover {
  border-bottom: 4px solid #F0641D;
  background-color: #505050;
}
#layout {
  width: 976px;
  margin: 16px auto;
  padding: 12px;
  background-color: #383838;
}
#layout div {
  display: inline-block;
}
#layout_left {
  width: 684px;
  margin: 0 16px -16px 0;
}
#content_left {
  padding: 4px 8px;
  margin-bottom: 16px;
  box-shadow: 0 0 8px #F0641D;
}
#content_right {
  width: 260px;
  padding: 4px 8px;
  box-shadow: 0 0 8px #F0641D;
}

shape =“circle”对应于图像中的编号圆圈。当光标移动到圆坐标上时，我想要一个弹出框，其中会显示一些文字。当光标移开时移除。我已经尝试过教程，但他们专注于多边形或矩形，所以我很挣扎，有什么想法吗？

*我有js / jquery.rwdimageMaps.js来正确调整图像/坐标的大小。和js / jquery.imagemapster.js一起工作，但对我来说太难以理解一个简单的问题