Más Tooptip

Los tooltip sirven para de información extra cuando pasamos el cursor sobre un elemento.

Utilizando tooltips, puedes mostrar el título de una imagen, la descripción de un enlace y más información 

Nos vamos de Tema > Editar Plantilla HTML

Buscamos ]]></b:skin>
Justo encima pegamos el siguiente código

VER.

<script> function abrir(url) { open(url,'','top=300,left=300,width=300,height=300') ; } </script> <a href="javascript:abrir('pagina.html')">Enlace</a>

Contenido POPUP

Lorem Ipsum...

Seguidamente agregamos el código según la posición:

Accordion

.tooltip.top .tiptext{ margin-left: -60px; bottom: 150%; left: 50%; } .tooltip.top .tiptext::after{ margin-left: -5px; top: 100%; left: 50%; border-color: #2E2E2E transparent transparent transparent; }

.tooltip.left .tiptext{ top: -5px; right: 110%; }
.tooltip.left .tiptext::after{ margin-top: -5px; top: 50%; left: 100%; border-color: transparent transparent transparent #2E2E2E; }

tooltip.right .tiptext{ top: -5px; left: 110%; }
.tooltip.right .tiptext::after{ margin-top: -5px; top: 50%; right: 100%; border-color: transparent #2E2E2E transparent transparent; }