Created
July 13, 2014 00:06
-
-
Save jomasero/9574071250952dd37c3b to your computer and use it in GitHub Desktop.
Tooltip fácil con CSS.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| <title>Tooltip con CSS</title> | |
| <style type="text/css"> | |
| body{ font:13px Arial, sans-serif; color:#999999; background:#023c4b;} | |
| img{border:none;} | |
| a{font:15px Geneva, Arial, Helvetica, sans-serif; color:#CCCCCC; text-decoration:none;} | |
| a:hover{border-bottom: 1px dashed #CCCCCC;} | |
| a.tooltip:hover {text-decoration:none;} | |
| a.tooltip span {display:none; margin:0 0 0 10px; padding:5px 5px; } | |
| a.tooltip:hover span{display:inline; position:absolute; border:1px solid #cccccc; background:#ffffff; color:#666666;} | |
| #footer a{font-size:12px;} | |
| #footer a:hover{color:#999999;} | |
| #container{width:800px; margin:10px auto;} | |
| #footer{clear:both;} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| Posicionarse arriba de los siguientes enlaces, para ver los tooltips en acción:<br /><br /> | |
| <a href="#" class="tooltip">PRIMERO<span>Este es una prueba de que nuestro tooltip funciona correctamente</span></a> | |
| <br /><br /><br /> | |
| <a href="#" class="tooltip">SEGUNDO<span>Madre mia! FUNCIONA!, Qué más puedo decir</span></a> | |
| <br /><br /><br /> | |
| <a href="#" class="tooltip">TERCERO<span>Si te atreves puedes ganar</span></a> | |
| <br /><br /><br /> | |
| <a href="#" class="tooltip">CUARTO<span>Vamos, vamos sigue avanzando!</span></a> | |
| <br /><br /><br /> | |
| <a href="#" class="tooltip">QUINTO<span>Llegaste al último!</span></a> | |
| <br /><br /><br /> | |
| <a href="http://www.twitter.com/h_guedea" class="tooltip"><img src="tooltip-css_files/twitter.png" alt="Ima Twiter" height="95" width="95" /><span>Sigueme en Twitter</span></a> | |
| <br /> | |
| <br /><br /> | |
| <div id="footer"><a href="http://guedea.blogspot.com/" class="tooltip" target="_blank">(c) Héctor Guedea<span>Entra a mi Blog a ver más recursos como este</span></a> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment