Javascript-форум - Инфографика с SVG. Отслеживание позиции курсора

Добрый день!
Имеется такая интерактивная картинка:
http://beton-art.ru/svgmy.html
При наведении курсора на некоторые детали фасада они подсвечиваются и вылезает окошко с описанием детали (кстати, если у кого-то не работает - напишите, пожалуйста, свою версию браузера)

Сделано по образцу: http://www.dejurka.ru/css/interactiv...ss-animations/

Окошко с описанием всегда всплывает из одного места, позиция которого определена в CSS, например:

Код:

#okna-badge {

  -webkit-transform-origin: 445px 488px;

  -moz-transform-origin: 445px 488px;

  -ms-transform-origin: 445px 488px;

  -o-transform-origin: 445px 488px;

  transform-origin: 445px 488px; 

  }

А у нас на картинке, как видно, один и тот же элемент может быть повторяющимся, то есть расположенным в любой части фасада. И как-то не эстетично получается: наводишь на элемент на крыше дома, а окно вылезает откуда-то снизу.

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

Я понимаю, как получить координаты мыши, но не знаю, как их привязать к свойству transform-origin. И нужно ли это делать для каждого id, или можно обойтись чем-то вроде [id$=badge]...