Popover sobre mapa de imágen

[dankko]

Hola, me han pedido un diseño en el que debo transformar un ppt en una web.

Ya he realizado todo lo necesario para la web, pero claro, al tener que utilizar imágenes en lugar de maquetar, algunas imágenes no se ven muy bien.

Estas imágenes deben estar mapeadas con enlaces, lo cual es tarea engorrosa, pero sencilla.

El problema real viene ahora, necesito utilizar un efecto popover (tipo Twitter Bootstrap) sobre un enlace generado por un mapa de imágenes.

Os dejo un ejemplo:

Código HTML:

<img src="./img/articulos.png" width="720" height="540" border="0" usemap="#articulos" />
<map name="articulos" id="articulos">
  <area shape="rect" coords="11,107,147,150" href="article1" target="_blank" />
</map>
 

Y sobre el área mapeada tendría que aparecer este tooltip al pasar el ratón, es decir, en lugar de que enlace a un link, que haga el efecto del popover.

Código HTML:

<a id="example" data-content="texto" rel="popover" href="#" data-original-title="Title"></a>
 

Aquí está la función en js del popover:

Código Javascript:

$(function () {
var $popoverInbox = $('#example').popover({
title: 'Test',
placement: 'bottom',
trigger:'manual',
template: '<div class="popover-all"><div class="popover-arrow"></div><div class="popover-inner"><h3 class="popover-title">Example</h3><div class="popover-content"></div></div></div>'
});
 
var timerPopover, popover_parent;
 
function hidePopover(elem) {
$(elem).popover('hide');
}
 
$('#example').hover(
function() {
var self = this;
clearTimeout(timerPopover);
$('.popover-all').hide(); //Hide any open popovers on other elements.
popover_parent = self;
$(self).popover('show');
},
function() {
var self = this;
timerPopover = setTimeout(function(){hidePopover(self);},300);
}
);
 
$(document).on({
mouseenter: function() {
clearTimeout(timerPopover);
},
mouseleave: function() {
var self = this;
timerPopover = setTimeout(function(){hidePopover(popover_parent);},300);
}
}, '.popover-all');
 
 
});
 

Para que funcione se deben incluir las librerías de js de bootstrap y jquery en el header de la web:

Código HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- <script src="./js/zoomy.min.js"></script> -->
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
 

Alguien sabría solucionar el problema? Llevo varios días intentándolo pero no consigo dar con la clave.

Saludos.