Contenido

Usa tooltips en tu texto

28 ene

+ 6

Bubble Tooltips, es una librería JS y unos estilos CSS con los cuales podemos conseguir unos globos informativos encima de nuestro texto. El sistema es muy sencillo y comodo.

  • Descargamos los ejemplos
  • Añadimos la llamada javascript al fichero y activamos la detección de tooltips. Lo colocamos entre las etiquetas HEAD del fichero HEADER.PHP.
<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips()};
</script>

Mediante el uso de enableTooltips("content"), podemos hacer que únicamente se refiera al texto ubicado dentro de <div id="content"></div>

  • Insertamos el texto a tratar entre los tags necesarios y el texto que queremos que muestre al colocar el cursor sobre él.
<span class="tooltip">
<span class="top">Texto que mostramos</span>
<b class="bottom">Texto que veremos al pasar por encima</b>
</span>

El texto que mostraremos está limitado a 30 caracteres.

  • Luego editaremos el código CSS correspondiente a las clases usadas para darle el aspecto que deseemos.
.tooltip,.tooltip *{display:block} /*added by javascript*/
.tooltip{ width: 200px; color:#000;
font:lighter 11px/1.3 Arial,sans-serif;
text-decoration:none;text-align:center}
.tooltip span.top{padding: 30px 8px 0;
background: url(bt.gif) no-repeat top}
.tooltip b.bottom{padding:3px 8px 15px;color: #548912;
background: url(bt.gif) no-repeat bottom}

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.