HTML
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,300i,400,400i,700,700i" rel="stylesheet">
<div class="content">
<div class="row">
<a href="#" class="btn tooltip top">
<span>TOOLTIP TOP</span>
<span class="tooltip-content">Lorem ipsum dolor sit amet</span>
</a>
</div>
<div class="row">
<a href="#" class="btn tooltip bottom">
<span>TOOLTIP BOTTOM</span>
<span class="tooltip-content">Lorem ipsum dolor sit amet</span>
</a>
</div>
<div class="row">
<a href="#" class="btn tooltip right">
<span>TOOLTIP RIGHT</span>
<span class="tooltip-content">Lorem ipsum dolor sit amet</span>
</a>
</div>
<div class="row">
<a href="#" class="btn tooltip left">
<span>TOOLTIP LEFT</span>
<span class="tooltip-content">Lorem ipsum dolor sit amet</span>
</a>
</div>
</div>
SCSS
.content {
align-items: center;
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 100vh;
font-family: 'Fira Sans', sans-serif;
justify-content: center;
padding: 2rem 0;
width: 100vw;
}
.row {
display: flex;
margin: auto;
}
a {
text-decoration: none;
}
.btn {
margin: 0 .5em;
}
/* COLORS */
$white: #ffffff;
$gray-light: #cdd2d6;
$black: #000000;
$blue: #05a8ff;
$orange: #ff7033;
$red: #f7404f;
$green: #49c562;
$shadow: rgba(205,210,214,.8);
/* BUTTONS */
.btn {
align-items: center;
background-color: white;
border: 1px solid $gray-light;
box-sizing: border-box;
color: $black;
display: flex;
height: 45px;
letter-spacing: 2px;
padding: .8em 1em;
transition: all .3s ease;
&:hover {
background-color: $blue;
border-color: $blue;
color: $white;
}
}
/* TOOLTIP */
.tooltip {
position: relative;
overflow: hidden;
&:hover {
overflow: visible;
.tooltip-content {
opacity: 1;
}
}
.tooltip-content {
background: $blue;
box-shadow: 0 5px 25px 5px $shadow;
box-sizing: border-box;
color: $white;
font-size: 12px;
line-height: 1.2;
letter-spacing: 1px;
max-width: 200px;
min-width: 145px;
padding: 1em;
position: absolute;
opacity: 0;
transition: all .3s ease;
&::after {
background: $blue;
content: "";
height: 10px;
position: absolute;
transform: rotate(45deg);
width: 10px;
}
}
&.top {
.tooltip-content {
bottom: calc(100% + 1.5em);
left: 50%;
transform: translateX(-50%);
&::after {
bottom: -5px;
left: 50%;
margin-left: -5px;
}
}
}
&.bottom {
.tooltip-content {
bottom: calc(-100% - 1.8em);
left: 50%;
transform: translateX(-50%);
&::after {
top: -5px;
}
}
}
&.right {
.tooltip-content {
left: calc(100% + 1.5em);
top: 50%;
transform: translateY(-50%);
&::after {
left: -5px;
margin-top: -5px;
top: 50%;
}
}
}
&.left {
.tooltip-content {
right: calc(100% + 1.5em);
top: 50%;
transform: translateY(-50%);
&::after {
right: -5px;
margin-top: -5px;
top: 50%;
}
}
}
}
