Agregar Tooltip a una imagen SVG

Agregar interactividad a un sitio web a través de pequeñas detalles, puede marcar la diferencia entre tu web y la de la competencia. Una de las formas actuales de agregar interactividad, es mostrando información dentro de una imagen. Ya sea este un: Mapa, asientos de un cine, buses, etc.

Esto se podría hacer de dos formas. Con la etiqueta html <map> y <area> o como en este caso, un archivo de imagen vectorial SVG

Para este ejemplo voy a usar esta imagen SVG que hice en Drawing SVG. con tres objetos para este caso.

Agregar tooltip a imagen SVG
Imagen SVG

Abrimos nuestro archivo SVG en nuestro editor de texto favorito (sublime text 3) y vemos que tiene dentro.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 515 191" style="enable-background:new 0 0 515 191;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;}
	.st1{fill:#FF6347;}
	.st2{fill:#FF1493;}
	.st3{fill:#48D1CC;}
</style>
<rect id="svgEditorBackground" class="st0" width="970" height="590"/>
<path id="e3_shape" class="st1" d="M117.3,47h-0.1c-4,0-7.3,3.2-7.3,7.3v1.1L13.7,68.2c-3.6,0.5-6.4,3.6-6.4,7.3v31.1
	c0,3.7,2.7,6.8,6.4,7.3l15.6,2.1v19c0,4,3.3,7.3,7.3,7.3h29.3c4,0,7.3-3.3,7.3-7.3v-13.2l36.6,4.9v1c0,4,3.2,7.3,7.3,7.3h0.1
	c4,0,7.3-3.2,7.3-7.3V54.3C124.5,50.3,121.3,47,117.3,47L117.3,47z M65.9,135H36.6v-18.1l29.3,3.9V135L65.9,135z"/>
<g id="e4_shape" transform="matrix(1.05356 0 0 1.05356 332.571 307.145)">
	<path class="st2" d="M-63.9-252.3c4.5-5.4,7.5-12.9,6.6-20.4c-6.4,0.2-14.2,4.3-18.8,9.7c-4.2,4.8-7.8,12.5-6.8,19.8
		C-75.8-242.6-68.4-246.8-63.9-252.3z"/>
	<path class="st2" d="M-47.8-204.6c-0.2-16.2,13.2-24.1,13.9-24.4c-7.5-11-19.3-12.5-23.5-12.7c-10-1-19.5,5.9-24.5,5.9
		c-5.1,0-12.9-5.8-21.2-5.6c-10.9,0.2-20.9,6.3-26.5,16.1c-11.3,19.6-2.9,48.7,8.1,64.6c5.4,7.7,11.9,16.5,20.3,16.2
		c8.1-0.3,11.1-5.3,21-5.3c9.8,0,12.6,5.3,21.2,5.1c8.7-0.1,14.3-7.9,19.6-15.7c6.2-9,8.7-17.8,8.9-18.2
		C-30.8-178.8-47.6-185.2-47.8-204.6z"/>
</g>
<g id="e5_shape" transform="matrix(1.16281 0 0 1.16281 453.698 234.161)">
	<path class="st3" d="M1.3-177.3c-0.5-0.2-1.1-0.1-1.3,0.4l-5.1,9.9c-4-1.6-8.4-2.5-13-2.5c-4.6,0-9,0.9-13,2.5l-5.2-9.9c-0.2-0.5-0.9-0.7-1.4-0.4c-0.4,0.3-0.6,0.9-0.4,1.4l5.1,9.7c-11.3,5.1-19.5,16-21,28.8h71.7c-1.4-12.9-9.7-23.7-21-28.8l5.1-9.7C1.9-176.5,1.8-177.1,1.3-177.3L1.3-177.3z M-34.2-143.6c-3.2,0-5.8-2.6-5.8-5.8c0-3.2,2.6-5.8,5.8-5.8c3.2,0,5.8,2.6,5.8,5.8C-28.4-146.2-31.1-143.6-34.2-143.6z M-2.2-155.2c3.2,0,5.8,2.6,5.8,5.8c0,3.2-2.6,5.8-5.8,5.8c-3.2,0-5.9-2.6-5.9-5.8C-8-152.6-5.3-155.2-2.2-155.2z"/>
	
	<path class="st3" d="M29.9-137.4c-4.4,0-8,3.6-8,8v32.1c0,4.4,3.6,8,8,8c4.4,0,8-3.6,8-8v-32.1C37.8-133.8,34.3-137.4,29.9-137.4z"/>
	<path class="st3" d="M-54.2-85.3c0,6.7,5.4,12,12,12h4v16c0,4.4,3.6,8,7.9,8c4.5,0,8.1-3.6,8.1-8v-16h8v16c0,4.4,3.6,8,8.1,8
		c4.3,0,8-3.6,8-8v-16h4c6.6,0,12-5.4,12-12v-44.1h-72.1L-54.2-85.3L-54.2-85.3z"/>

	<path class="st3" d="M-66.3-137.4c-4.4,0-8,3.6-8,8v32.1c0,4.4,3.5,8,8,8c4.4,0,8-3.6,8-8v-32.1C-58.2-133.8-61.8-137.4-66.3-137.4z"/>
</g>
</svg>

Una vez que tenemos recurrimos a jQuery (si, es horrible… pero ya) y a Tooltipster. Esta ultimo es un plugin de jQuery que nos ayudara a crear los tooltips dentro de un SVG.

Descargamos ambos archivos (jquery – tooltipster) y colocamos dentro de nuestro proyecto y lo llamamos en el header de nuestro archivo html.

Nota: Se descarga tambien el archivo CSS de Tooltipster

<link rel="stylesheet" type="text/css" href="tooltipster.bundle.min.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
 <script type="text/javascript" src="tooltipster.bundle.min.js"></script>

A continuación, agregaremos un pequeño fragmento de código JavaScript en el header (o footer).

<script>
    $(document).ready(function() {
        $('.tooltip').tooltipster({
        contentAsHTML: true
        });
    });
</script>

Seguido, buscamos o agregamos una clase CSS al objeto donde queramos que aparezca el tooltip.

class="tooltip" title="Text <strong>Text</strong>"

Les dejo un demo pero este funciona con la etiqueta html / Map. Este proyecto incluye un resizemap, fancybox y tooltipster. Github

Imagen por defecto
Appatico

Deja un comentario