Varias ventanas con EZPZ Tooltip y map

ceaped · #1 (**permalink**) 13/08/2014, 12:49

Buenas tardes
Utilizo EZPZ Tooltip
Lo que no logro hacer es que me abra varios ToolTip.

Así tengo mi estructura:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 
<meta charset="utf-8">  
<title>The EZPZ Way &ndash; EZPZ Tooltip</title>
 
<link rel="stylesheet" type="text/css" href="css/estilo_tooltip.css" />
    
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/original.js" ></script>
    
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
        
$("#stay-target-1").ezpz_tooltip({
contentPosition: 'topLeft',
stayOnContent: true,
offset: 0
});
 
$("#stay-target-2").ezpz_tooltip({
contentPosition: 'topLeft',
stayOnContent: true,
contentInfo: 'stay-target-2',
offset: 0
});
 
});
</script>
 
 
 
</head>
 
<body>
 
<!--Mapa conceptual-->
<div class="marco_mapa">
<img src="images/mapa_circuitos.png" border="0" usemap="#mimapa" id="map" alt="Mapa de Circuitos II">
 
 
    <!-- Navegacion del mapa grande -->
    <map name="mimapa" id="mimapa">
    <area shape="rect" coords="628,2,793,44" href="videos/video_introduccion.html" class="iframe_video" title="Circuitos eléctricos II">
    <area shape="rect" coords="343,96,508,138" href="pdf/circuito_dominio_frecuencia.pdf" class="iframe_pdf" title="Circuitos en el dominio de la frecuencia">
    <area shape="rect" coords="147,211,312,253" href="#" id="stay-target-1">
    <area shape="rect" coords="307,337,472,379" href="#" id="stay-target-2">
    </map>
    <!-- Fin Navegacion del mapa grande -->
 
 
    <!-- Contenidos del ToolTip -->
    <div class="tooltip-content" id="stay-content-1">
 
    <a href="#"><img src="images/icono_pdf.png" alt="Abrir PDF"></a>
    <a href="#"><img src="images/icono_video.png" alt="Abrir video"></a>
    <a href="#"><img src="images/icono_video.png" alt="Abrir video"></a>
    <!-- Fin Contenidos del ToolTip -->
    
    
    <!-- Contenidos del ToolTip -->
    <div class="tooltip-content" id="stay-target-2">
 
    <a href="#"><img src="images/icono_pdf.png" alt="Abrir PDF"></a>
    <a href="#"><img src="images/icono_video.png" alt="Abrir video"></a>
    <a href="#"><img src="images/icono_video.png" alt="Abrir video"></a>
    <!-- Fin Contenidos del ToolTip -->
 
    </div>
 
    </div>
    </div>
 
</body>
</html>

Pero solo me abre un toolTip.

$("#stay-target-1").ezpz_tooltip({
contentPosition: 'topLeft',
stayOnContent: true,
offset: 0
});

¿Cómo hago para agregar varios toolTip?

Gracias por su ayuda