Skip to content

Instantly share code, notes, and snippets.

@hahwul
Last active January 18, 2021 06:59
Show Gist options
  • Save hahwul/157a229d9ec75e95a44f7115c85f8943 to your computer and use it in GitHub Desktop.
Save hahwul/157a229d9ec75e95a44f7115c85f8943 to your computer and use it in GitHub Desktop.
Tooltip using pure css
[data-tooltip-text]:hover {
position: relative;
}
[data-tooltip-text]:after {
-webkit-transition: bottom .3s ease-in-out, opacity .3s ease-in-out;
-moz-transition: bottom .3s ease-in-out, opacity .3s ease-in-out;
transition: bottom .3s ease-in-out, opacity .3s ease-in-out;
background-color: rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
-moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #FFFFFF;
font-size: 12px;
margin-bottom: 10px;
padding: 7px 12px;
position: absolute;
width: auto;
min-width: 50px;
max-width: 300px;
word-wrap: break-word;
z-index: 9999;
opacity: 0;
left: -9999px;
top: 90%;
content: attr(data-tooltip-text);
}
[data-tooltip-text]:hover:after {
top: 130%;
left: 0;
opacity: 1;
}
<span data-tooltip-text="tooltip 1">tooltip test 1</span>
<br/><br/>
<span data-tooltip-text="tooltip2">tooltip test 2</span>
<br/><br/>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment