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}
Ya esta corregido, basta con colocarlo entre las etiquetas
6 comentarios, 0 referencias
+
#