jQuery Tooltip es una librería javascript que extiende las propiedades de jQuery y la cual nos permite agregar un tooltip a nuestra páginas web, esto con la posibilidad de personalizar el tooltip mediante CSS.
Hoy vamos a ver la forma de añadir Tooltips en blogger, para eso vamos a descargar los siguientes archivos:
jquery.js
jquery.tooltip.js
Luego de eso nos quedaría insertarlos en nuestro blog de blogger antes de la etiqueta
Lo siguiente sería crear una hoja de estilos para el tooltip, a continuación dejaré una ya realizada:
El siguiente paso es modificar los parámetros de configuración del tooltip, para ello se tiene los siguientes parámetros:
track: booleno que indica si el tooltip seguirá al mouse o se quedará estático.
delay: tiempo en milisegundos antes que aparezca el tooltip.
showURL: booleano que indica si se mostrará el url al final del contenido.
showBody: caracteres que separa el titulo de contenido del tooltip.
Además de ello se tiene que definir a que tags se va aplicar el tooltip, por ejemplo si deseamos que todos los tags a, input e img tengan tooltip el código sería:
Nuevamente añadir ese código antes de la etiqueta
Para generar un Tooltip un código de ejemplo sería:
y listo, con eso ya tendríamos los Tooltips implementados en blogger, dejaré nuevamente los enlaces de descarga de los archivos:
jquery.js
jquery.tooltip.js
Más Información
Hoy vamos a ver la forma de añadir Tooltips en blogger, para eso vamos a descargar los siguientes archivos:
Luego de eso nos quedaría insertarlos en nuestro blog de blogger antes de la etiqueta
</head> de la siguiente manera:[<script src="jquery.js" type="text/javascript"></script> <script src="jquery.tooltip.js" type="text/javascript"></script>]
Lo siguiente sería crear una hoja de estilos para el tooltip, a continuación dejaré una ya realizada:
[#tooltip { background-color: #CCCCCC; border: 1px solid #888888; color: #333333; padding: 4px; -moz-border-radius-bottomleft: 7px; -moz-border-radius-bottomright: 7px; -moz-border-radius-topleft: 0; -moz-border-radius-topright: 7px; } #tooltip h3 { font-size: 1.1em; margin: 0; padding: 0 3px; text-align: left !important; } #tooltip p { font-size: 0.95em; margin: 5px 0 0 5px; text-align: left; }]
El siguiente paso es modificar los parámetros de configuración del tooltip, para ello se tiene los siguientes parámetros:
track: booleno que indica si el tooltip seguirá al mouse o se quedará estático.
delay: tiempo en milisegundos antes que aparezca el tooltip.
showURL: booleano que indica si se mostrará el url al final del contenido.
showBody: caracteres que separa el titulo de contenido del tooltip.
Además de ello se tiene que definir a que tags se va aplicar el tooltip, por ejemplo si deseamos que todos los tags a, input e img tengan tooltip el código sería:
[<script type="text/javascript"> $(function() { // modify global settings $.extend($.fn.Tooltip.defaults, { track: true, delay: 0, showURL: false, showBody: " - " }); $('a, input, img').Tooltip(); }); </script>]
Nuevamente añadir ese código antes de la etiqueta
</head>.Para generar un Tooltip un código de ejemplo sería:
[<a href="http://www.google.com" title="Google - http://www.google.com">Google</a>]
y listo, con eso ya tendríamos los Tooltips implementados en blogger, dejaré nuevamente los enlaces de descarga de los archivos:
Más Información
