Skip to content

Instantly share code, notes, and snippets.

@ijse
Created December 5, 2016 03:07
Show Gist options
  • Save ijse/a26c475ddd6f4d829235cca34ea20752 to your computer and use it in GitHub Desktop.
Save ijse/a26c475ddd6f4d829235cca34ea20752 to your computer and use it in GitHub Desktop.
Pure CSS Tooltips
[tooltip],
[tooltip-top],
[tooltip-right],
[tooltip-left],
[tooltip-bottom] {
@bgcolor: #495364;
position: relative;
cursor: pointer;
&:before,
&:after {
opacity: 0;
pointer-events: none;
transition: all 1s;
z-index: 2000;
}
&:hover {
&:before,
&:after {
opacity: 1;
}
}
&:after {
content: attr(tooltip);
position: absolute;
width: 100%;
min-width: 100px;
padding: 7px 10px;
margin-left: 5px;
font-size: 14px;
text-align: center;
color: #fff;
line-height: 14px;
background-color: @bgcolor;
border-radius: 2px;
}
&:before {
content: ' ';
position: absolute;
width: 5px;
height: 5px;
left: 100%;
top: calc(50%-5px);
margin-top: -2.5px;
transform: rotate(45deg);
border: 5px solid transparent;
border-bottom-color: @bgcolor;
border-left-color: @bgcolor;
}
}
[tooltip-top] {
&:after {
content: attr(tooltip-top);
transform: translate3d(-100%, -100%, 0);
}
&:before {
left: 50%;
top: -4px;
transform: rotate(-45deg);
}
}
[tooltip-left] {
&:after {
content: attr(tooltip-left);
right: 100%;
margin-right: 5px;
}
&:before {
right: 100%;
left: auto;
transform: rotate(-135deg);
}
}
[tooltip-right] {
&:after {
content: attr(tooltip-right);
}
}
[tooltip-bottom] {
&:after {
content: attr(tooltip-bottom);
transform: translate3d(-100%, 100%, 0);
}
&:before {
left: 50%;
top: auto;
bottom: -8px;
transform: rotate(-225deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment