Чем/как проще всего реализовать Tooltip в нескольких местах одного изображения? - Поиск компонентов, модулей, плагинов

<ul id="tooltip">
  <li class="name1">
    <a href="#">
      <span>тут текст который будет всплывать</span>
    </a>
  </li>
  <li class="name2">
    <a href="#">
      <span>текст2</span>
    </a>
  </li>
</ul>

#tooltip,
#tooltip li a {position:relative;}

#tooltip li,
#tooltip li span {position:absolute;}

#tooltip a span {display:none; bottom:60px; left:-50px; width:100px; height:50px; background:#CCC;}
#tooltip a:hover span {display:block;}

#tooltip li {width:50px; height:50px; background:#F00;}

.name1 {top:100px; left:200px;}
.name2 {top:300px; left:500px;}

<ul id="knopki">
  <li>Оффлайн</li>
  <li>Заполните</li>
</ul>
<ul id="spisok">
  <li>Мордокнига</li>
  <li>Твистер</li>
</ul>

#knopki li {background: url(../images/tnopka.png) 0 0 no-repeat; padding:0 5px;} /*верхние кнопки*/
#spisok li {background: url(../images/iconka.png) 0 0 no-repeat; padding-left:50px;} /*иконки ниже которые*/