Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Tooltip SASS Mixin
// Tooltip
@mixin tooltip($size: 5px, $dir: left, $bgcolor: #000) {
background: $bgcolor;
position: relative;
&:before {
border-style: solid;
content: "";
display: block;
position: absolute;
@if (($dir == top) or ($dir == bottom)) {
border-color: $bgcolor transparent;
left: 50%;
margin-left: -$size;
} @else {
border-color: transparent $bgcolor;
margin-top: -$size;
top: 50%;
}
@if ($dir == top) {
border-width: 0 $size $size $size;
top: -$size;
}
@if ($dir == right) {
border-width: $size 0 $size $size;
right: -$size;
}
@if ($dir == bottom) {
border-width: $size $size 0 $size;
bottom: -$size;
}
@if ($dir == left) {
border-width: $size $size $size 0;
left: -$size;
}
}
}
// Usage
ul {
@include tooltip(5px, right, rgba(0, 0, 0, .8));
width: 400px
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment