Tooltips con puro CSS
Jueves 9 de Octubre del 2008 - Diseño Web
Crear Tooltips Soy un triste Tooltip está "tirao", incluso con HTML 
¡ Ey ! ¡ Mira mamá, sin javascript !
¡ Ey ! ¡ Mira mamá, sin javascript !CSS:
-
a.tooltip { font-weight:bold; }
-
a.tooltip span { display:none; padding:5px; margin-left:8px; width:150px; }
-
a.tooltip img { float:left; margin:0; padding:0; }
-
a.tooltip:hover span{ display:inline; position:absolute; background:#ffffff; border:1px dotted #cccccc; color:#555;font-size:14px; font-weight:normal; }
HTML:
-
Crear <a href="#" class="tooltip">Tooltips <span>Soy un triste Tooltip</span></a> está "tirao", incluso <a href="#" class="tooltip">con HTML <span><img src="http://www.propiedadprivada.com/wp-content/themes/typoxp-mod-akb/img/tip_icon.gif" alt="tooltip" />¡ Ey ! ¡ Mira mamá, sin javascript !</span></a>
Términos relacionados: tooltip, tooltips, javascript css, puro, span
