Tooltips con puro CSS

votar
Jueves 9 de octubre del 2008 - Diseño Web
Crear Tooltips Soy un triste Tooltip está "tirao", incluso con HTML tooltip¡ Ey ! ¡ Mira mamá, sin javascript !
VER TEXTO PLANO
CSS:
  1. a.tooltip { font-weight:bold; }
  2. a.tooltip span { display:none; padding:5px; margin-left:8px; width:150px; }
  3. a.tooltip img { float:left; margin:0; padding:0; }
  4. a.tooltip:hover span{ display:inline; position:absolute; background:#ffffff; border:1px dotted #cccccc; color:#555;font-size:14px; font-weight:normal; }

VER TEXTO PLANO
HTML:
  1. 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>

Fecha de la entrada: Jueves, 9 de octubre del 2008 a las 10:54 am. Puedes seguir los comentarios a la entrada utilizando su feed RSS 2.0. Si lo deseas, puedes dejarnos un comentario, o hacer trackback desde tu propio sitio web.

4 comentarios a esta entrada

  • Gravatar crishard dijo
    el # Viernes, 19 de febrero del 2010 a las 05:52

    1

    Si mongolito, muy tirado hacer un tooltip.
    Haga que le funcione en IE6.

  • Gravatar Marcos B.L. dijo
    el # Viernes, 19 de febrero del 2010 a las 11:32

    2

    Mongolito ? Tu puta madre :D

  • Gravatar fernando dijo
    el # Sábado, 10 de julio del 2010 a las 08:28

    3

    la verdad con tan poco codigo esta muy muy bueno
    gracias

  • Gravatar Tsubasa dijo
    el # Viernes, 6 de agosto del 2010 a las 19:16

    4

    con esto funcionaria para ie6 tambien
    a:hover {background:#ffffff; text-decoration:none;}
    saludos

Deja tu opinión

Sólo se permiten las etiquetas XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Post anteriores/siguientes:

«
»

Post (quizás) relacionados:

  • Ocho técnicas para dibujar gráficas con puro CSS

    • Ocho técnicas para dibujar gráficas con puro CSS en SixRevisions, algunas de ellas incluso accesibles....
  • Menús Dropdown horizontales con puro CSS

    • Un ejemplo más de menú Dropdown horizontal con puro CSS, bastante logrado y "wireframe", adaptable de forma sencilla con CSS. Artículo y demo. Otro muy interesante...
  • jQuery Minimalista: 11 útiles plugins de menos de 4K

    • jQuery Minimalista: 11 útiles plugins de menos de 4K, Tabs, Carruseles de imágenes, carga de Plugins bajo demanda, Menús, Ventanas modales, Tooltips... soluciones simples de...
  • De link varia

    • Back to School with the Class of Web 2.0 partes Uno, Dos y Tres es una cuidada recopilación de SolutionWatch de recursos útiles en Internet...
  • Envío al CERN por parte de los dueños de Reddit

    • Los dueños de Reddit, preocupados por las posibles consecuencias del Gran Colisionador de Hadrones, han hecho un envío al CERN con una palanca para abrir...