CSS/SCSS Custom tooltip effect - css

Question

Hello guys I'm trying to create a custom tooltip, with a cool hovering effect. I found a code on the internet which does almost what I want. Below is the code
.tooltip {
position: relative;
&__item {
position: absolute;
min-width: 100px;
padding: 20px;
visibility: hidden;
opacity: 0;
background: white;
transition: all .250s cubic-bezier(0, 0, 0.2, 1);
color: #484848;
border: 1px solid #cecece;
border-radius: 3px;
font-weight: 500;
box-shadow: 0 2px 1px #bcbcbc;
z-index: 4;
&:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
}
}
&__initiator {
cursor: pointer;
z-index: 5;
}
&[data-direction="bottom"] {
.tooltip__initiator:hover ~ .tooltip__item {
transform: translate3d(-50%, 0, 0);
visibility: visible;
opacity: 1;
}
.tooltip__item {
top: calc(100% + 1em);
left: 50%;
transform: translate3d(-50%, -15px, 0);
&:after {
top: -0.5em;
left: 50%;
transform: translate3d(-50%, 0, 0);
border-width: 0 0.5em 0.5em 0.5em;
border-color: transparent transparent white transparent;
-webkit-filter: drop-shadow(1px 2px 1px #bcbcbc);
filter: drop-shadow(1px -1px 1px #bcbcbc);
}
}
}
}
and here is the result
What I want is that the custom tooltip should be displayed above the component NOT below. I'm new to css/scss, so can a kind person edit the code for me so as to obtain this effect?
UPDATE
This link is where I got the code from. It has a working example.

Answer 1

.tooltip {
position: relative;
}
.tooltip__item {
position: absolute;
min-width: 100px;
padding: 20px;
visibility: hidden;
opacity: 0;
background: white;
transition: all 0.25s cubic-bezier(0, 0, 0.2, 1);
color: #484848;
border: 1px solid #cecece;
border-radius: 3px;
font-weight: 500;
box-shadow: 0 2px 1px #bcbcbc;
z-index: 4;
}
.tooltip__item:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
}
.tooltip__initiator {
cursor: pointer;
z-index: 5;
}
.tooltip[data-direction="left"] .tooltip__initiator:hover ~ .tooltip__item {
transform: translate3d(0, -50%, 0);
visibility: visible;
opacity: 1;
}
.tooltip[data-direction="left"] .tooltip__item {
top: 50%;
right: calc(100% + 1em);
transform: translate3d(15px, -50%, 0);
}
.tooltip[data-direction="left"] .tooltip__item:after {
top: 50%;
right: -0.5em;
transform: translate3d(0, -50%, 0);
border-width: 0.5em 0 0.5em 0.5em;
border-color: transparent transparent transparent white;
-webkit-filter: drop-shadow(0px 2px 1px #bcbcbc);
filter: drop-shadow(0px 2px 1px #bcbcbc);
}
.tooltip[data-direction="top"] .tooltip__initiator:hover ~ .tooltip__item, .tooltip[data-direction="bottom"] .tooltip__initiator:hover ~ .tooltip__item {
transform: translate3d(-50%, 0, 0);
visibility: visible;
opacity: 1;
}
.tooltip[data-direction="top"] .tooltip__item, .tooltip[data-direction="bottom"] .tooltip__item {
left: 50%;
transform: translate3d(-50%, -15px, 0);
}
.tooltip[data-direction="top"] .tooltip__item:after, .tooltip[data-direction="bottom"] .tooltip__item:after {
left: 50%;
transform: translate3d(-50%, 0, 0);
}
.tooltip[data-direction="top"] .tooltip__item {
bottom: calc(100% + 1em);
}
.tooltip[data-direction="top"] .tooltip__item:after {
bottom: -0.5em;
border-width: 0.5em 0.5em 0 0.5em;
border-color: white transparent transparent transparent;
filter: drop-shadow(0px 2px 1px #bcbcbc);
-webkit-filter: drop-shadow(0px 2px 1px #bcbcbc);
}
.tooltip[data-direction="bottom"] .tooltip__item {
top: calc(100% + 1em);
}
.tooltip[data-direction="bottom"] .tooltip__item:after {
top: -0.5em;
border-width: 0 0.5em 0.5em 0.5em;
border-color: transparent transparent white transparent;
filter: drop-shadow(0px -1px 1px #bcbcbc);
-webkit-filter: drop-shadow(0px -1px 1px #bcbcbc);
}
.fa.fa-info-circle {
font-size: 38px;
color: #21606b;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: sans-serif;
background: #dadada;
font-family: 'Roboto', sans-serif;
}
main {
flex: 1 1 100vh;
min-height: 100vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<main>
<!-- tooltip block -->
<div class="tooltip" data-direction="top">
<div class="tooltip__initiator">
<!-- element with tooltip hover call -->
<i class="fa fa-info-circle"></i>
</div>
<div class="tooltip__item">
Hello! I'm a pure css tooltip going up
</div>
</div>
<!-- tooltip block -->
<div class="tooltip" data-direction="bottom">
<div class="tooltip__initiator">
<!-- element with tooltip hover call -->
<i class="fa fa-info-circle"></i>
</div>
<div class="tooltip__item">
Hello! I'm a pure css tooltip going down
</div>
</div>
</main>

Answer 2

Done.
Copy and paste this CSS
&[data-direction="bottom"] {
.tooltip__initiator:hover ~ .tooltip__item {
transform: translate3d(-50%, 0, 0);
visibility: visible;
opacity: 1;
}
.tooltip__item {
bottom: 50px;
left: 50%;
transform: translate3d(-50%, -15px, 0);
&:after {
top: 100%;
left: 45%;
transform: translate3d(-40%, 0, 0);
border-width: 0 0.5em 0.5em 0.5em;
border-color: transparent transparent white transparent;
transform:rotate(180deg);
-webkit-filter: drop-shadow(1px 2px 1px #bcbcbc);
filter: drop-shadow(1px -1px 1px #bcbcbc);
}
}
}

Answer 3

I would add "top" data-directio. You need to change to location of the tooltip by altering the top value. Also you need to change the direction and location of the small arrow by changing the :after
top -> bottom
and the border colors
border-color: white transparent white transparent;
and shadow:
filter: drop-shadow(-1px 1px 1px #bcbcbc);
Here's the full code:
&[data-direction="top"] {
.tooltip__initiator:hover ~ .tooltip__item {
transform: translate3d(-50%, 0, 0);
visibility: visible;
opacity: 1;
}
.tooltip__item {
top: calc(-200% - 2em);
left: 50%;
transform: translate3d(-50%, -15px, 0);
&:after {
bottom: -0.5em;
left: 50%;
transform: translate3d(-50%, 0, 0);
border-width: 0.5em 0.5em 0 0.5em;
border-color: white transparent white transparent;
-webkit-filter: drop-shadow(1px 2px 1px #bcbcbc);
filter: drop-shadow(-1px 1px 1px #bcbcbc);
}
}
}
And the example is here