Los ToolTip son herramientas muy útiles en el diseño, pues muy discretamente proporcionan información sobre un objeto (puede ser una imagen que es lo mas usual), es una herramienta de ayuda visual, que funciona al situar el cursor sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.
En Blogger se pueden añadir tooltip de varias maneras y en el día de hoy mostraremos como añadirlo por medo de jQuery.
Para aplicar este truco primero tienes que ir a la edición HTML de tu blog (Escritorio de Blogger, Plantilla, Editar HTML) y buscas </head> y pegas antes de </head> lo siguiente (cuando estés en la caja de código apreté Ctrl+F y escribe </head> enter y estarás en la linea instantáneamente.)
<script src='http://dl.dropbox.com/u/91602513/Html/TutorialesBlogger.blogspot.com/Tooltip1.js' type='text/javascript'/> <script src='http://dl.dropbox.com/u/91602513/Html/TutorialesBlogger.blogspot.com/Tooltip.js' type='text/javascript'/>
Ahora justo antes de ]]></b:skin> pega lo siguiente:
.tip { width: 212px; padding-top: 37px; overflow: hidden;
display: none; position: absolute; z-index: 500;
background: transparent
url(https://lh6.googleusercontent.com/-0KM2ludeMBo/UALZZEBrqBI/AAAAAAAACmc/s-SnyEbuwR8/s1600/hb_tipTop.png) no-repeat top; }
.tipMid { background: transparent url(https://lh4.googleusercontent.com/-Vu0rxFVABjQ/UALZYWnIryI/AAAAAAAACmY/M6hXn5zozh4/s1600/hb_tipMid.png)
repeat-y; padding: 0 25px 20px 25px; } .tipBtm { background: transparent
url(https://lh3.googleusercontent.com/-fcuks1eGyhM/UALZXjVS6CI/AAAAAAAACmQ/GZF8z7d7S4c/s1600/hb_tipBtm.png) no-repeat bottom; height: 32px; }
Ahora guarda los cambios y ve a la edición html de una entrada y pega lo siguiente:
<a class="tTip" href="url del enlace" title="Texto del ToolTip">Palabra o texto en el que quieres que aparezca el Tooltip</a>
El anterior código corresponde a un tooltip con texto, pero si quieres que el tooltip aparezca en una imagen el código es el siguiente:
<img class='tTip' title='Texto del ToolTip' src='Url de la Imagen'/>
El tooltip se ve de la siguiente manera:
Espero que este tutorial te haya gustado y que lo compartas en las redes sociales.
0 comentarios