Last active
March 14, 2022 20:04
-
-
Save perezdans/cdadf0eaaa625c5e4de26d448d3004ca to your computer and use it in GitHub Desktop.
Crear un tooltip con css
This file contains 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> | |
| <html> | |
| <head> | |
| <title>CSS Tricks & Tips</title> | |
| <meta charset="UTF-8" /> | |
| <style> | |
| .tooltip { | |
| position: relative; | |
| border-bottom: 1px dotted black; | |
| } | |
| .tooltip:before { | |
| content: attr(tooltip-data); | |
| position: absolute; | |
| width: 250px; | |
| background-color: #efba93; | |
| color: #fff; | |
| text-align: center; | |
| padding: 15px; | |
| line-height: 1.1; | |
| border-radius: 5px; | |
| z-index: 1; | |
| opacity: 0; | |
| transition: opacity .5s; | |
| bottom: 125%; | |
| left: 50%; | |
| margin-left: -60px; | |
| font-size: 0.70em; | |
| visibility: hidden; | |
| } | |
| .tooltip:after { | |
| content: ""; | |
| position: absolute; | |
| bottom: 75%; | |
| left: 50%; | |
| margin-left: -5px; | |
| border-width: 5px; | |
| border-style: solid; | |
| opacity: 0; | |
| transition: opacity .5s; | |
| border-color: #000 transparent transparent transparent; | |
| visibility: hidden; | |
| } | |
| .tooltip:hover:before, | |
| .tooltip:hover:after { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1> | |
| HTML/CSS tooltip | |
| </h1> | |
| <p> | |
| Hover <span class="tooltip" tooltip-data="Tooltip Content">Here</span> to see the tooltip. | |
| </p> | |
| <p> | |
| You can also hover <span class="tooltip" tooltip-data="This is another Tooltip Content">here</span> to see another example. | |
| </p>.tooltip { | |
| position: relative; | |
| border-bottom: 1px dotted black; | |
| } | |
| .tooltip:before { | |
| content: attr(tooltip-data); | |
| position: absolute; | |
| width: 250px; | |
| background-color: #efba93; | |
| color: #fff; | |
| text-align: center; | |
| padding: 15px; | |
| line-height: 1.1; | |
| border-radius: 5px; | |
| z-index: 1; | |
| opacity: 0; | |
| transition: opacity .5s; | |
| bottom: 125%; | |
| left: 50%; | |
| margin-left: -60px; | |
| font-size: 0.70em; | |
| visibility: hidden; | |
| } | |
| .tooltip:after { | |
| content: ""; | |
| position: absolute; | |
| bottom: 75%; | |
| left: 50%; | |
| margin-left: -5px; | |
| border-width: 5px; | |
| border-style: solid; | |
| opacity: 0; | |
| transition: opacity .5s; | |
| border-color: #000 transparent transparent transparent; | |
| visibility: hidden; | |
| } | |
| .tooltip:hover:before, | |
| .tooltip:hover:after { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment