SCSS
//variables
$maincolor: #0e88e3;
$color: #fff;
$other: #2e2c60;
$border: red;
//mixins
@mixin tooltip-container(){
max-width: 200px;
margin-left:2em;
position: relative;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
@mixin tooltip(){
text-align: justify;
color: $color;
font-weight: bolder;
background-color: $maincolor;
padding: 1em 1em;
font-family: sans-serif;
position: abosolute;
transition: all 0.5s ease;
&:hover{
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
&::before{
content: ' ';
display: block;
width: 20px;
height: 20px;
transform: rotatez(45deg);
position:absolute;
left: -0.6em;
background-color: $maincolor;
}
}
//elements
.tooltip{
@include tooltip();
}
.tooltip-container{
@include tooltip-container();
}
.tooltip-wrap{
padding: 0px;
width: auto;
max-width: 300px;
display: inline-block;
}
h1{
color: $other;
text-align: center;
display: inline-block;
}
