Created
October 21, 2016 10:47
-
-
Save rhom6us/b490fba82c1337a7d73395dd4fd1309c to your computer and use it in GitHub Desktop.
css tooltip
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> | |
| <style> | |
| [fu] { | |
| position:relative; | |
| } | |
| [fu]::before,[fu]::after { | |
| visibility: hidden; | |
| position: absolute; | |
| /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */ | |
| opacity: 0; | |
| transition: opacity 1s; | |
| } | |
| [fu]::after { | |
| width: 120px; | |
| background-color: black; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 5px 0; | |
| z-index: 1; | |
| top: -5px; | |
| left: 110%; | |
| content: attr(fu); | |
| } | |
| [fu]::before{ | |
| content: " "; | |
| top: 50%; | |
| left: 100%; | |
| margin-top: -5px; | |
| border-width: 5px; | |
| border-style: solid; | |
| border-color: transparent black transparent transparent; | |
| } | |
| [fu]:hover::before, [fu]:hover::after { | |
| visibility:visible; | |
| opacity: 1; | |
| } | |
| </style> | |
| <body style="text-align:center;"> | |
| <p>Move the mouse over the text below:</p> | |
| <span fu="Tooltip text">Hover over me</span> | |
| <p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in an desirable way.</p> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment