Me intereso mucho la manera de añadir Tooltip en blogger, que e vuelto a realizar un artículo sobre una manera más facil y convencional que la anterior forma: jQuery Tooltip en blogger, así que busque las maneras de simplificar el método para ahorrar más espacio y tiempo de carga y bien eh aqui una nueva forma.
Javascript
El código Javascript que perfeccione, tuvo un problema que Blogger no admitió cuando me toco insertarlo en el blog de pruebas, me generaba error la línea for (i=0; i<imgs.length; i++), entonces busque las maneras de corregir parseando el código y al final funciono, vamos a insertar el siguiente código luego de parsearlo en nuestro conversor de HTML en nuestro blog de blogger antes de la etiqueta
Si ya pasaste el código por el conversor de HTML, solo bastaría con introducirlo.
CSS
La hoja de estilos es totalmente simple y facil, solo bastaría con añadir el siguiente código antes de la etiqueta
Y listo, con eso tendríamos nuestros Tooltips generados en Blogger.
Para generar un Tooltip un código de ejemplo sería:
Tooltip en Imagenes:
Ya esta, espero pueda servirles, pueden personalizar la hoja de estilos si lo desean, también pueden utilizar un método más difícil que sería utilizando jQuery para generar los Tooltip en blogger.
Javascript
El código Javascript que perfeccione, tuvo un problema que Blogger no admitió cuando me toco insertarlo en el blog de pruebas, me generaba error la línea for (i=0; i<imgs.length; i++), entonces busque las maneras de corregir parseando el código y al final funciono, vamos a insertar el siguiente código luego de parsearlo en nuestro conversor de HTML en nuestro blog de blogger antes de la etiqueta
</head>, el código es el siguiente, recuerda utilizar el conversor de HTML:[<script language='JavaScript'> function showTT(el) { var ttext=el.title; var tt=document.createElement('SPAN'); var tnode=document.createTextNode(ttext); tt.appendChild(tnode); el.parentNode.insertBefore(tt,el.nextSibling); tt.className="tt"; el.title=""; } function hideTT(el) { var ttext=el.nextSibling.childNodes[0].nodeValue; el.parentNode.removeChild(el.nextSibling); el.title=ttext; } function tooltip() { var imgs=document.getElementsByTagName('img'); for (i=0; i<imgs.length; i++) { imgs[i].onmouseover=function() {showTT(this);} imgs[i].onmouseout=function() {hideTT(this);} } } window.onload=tooltip; </script>]
Si ya pasaste el código por el conversor de HTML, solo bastaría con introducirlo.
CSS
La hoja de estilos es totalmente simple y facil, solo bastaría con añadir el siguiente código antes de la etiqueta
</b:skin> de nuestro blog:[.tt { position:absolute; border:1px solid gray; width:300px; margin:1em; padding:3px; background:#fff; }]
Y listo, con eso tendríamos nuestros Tooltips generados en Blogger.
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>]
Tooltip en Imagenes:
[<img src="url-imagen" title="Ejemplo de Tooltip" />]
Ya esta, espero pueda servirles, pueden personalizar la hoja de estilos si lo desean, también pueden utilizar un método más difícil que sería utilizando jQuery para generar los Tooltip en blogger.
