button Please hover
span This is tooltip.
View Compiled
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
button {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 16em;
height: 3.2em;
padding: 0 1em;
border: none;
border-radius: 3px;
background-color: #199bfc;
color: #fff;
font-family: 'Press Start 2P', cursive;
font-size: 2.4vw;
cursor: pointer;
outline: none;
appearance: none;
&:hover {
span {
opacity: 1;
transform: translate(-50%, 0);
}
}
span {
position: absolute;
left: 50%;
bottom: 100%;
opacity: 0;
margin-bottom: 1em;
padding: 1em;
background-color: #000;
font-size: .6em;
line-height: 1.6;
text-align: left;
white-space: nowrap;
transform: translate(-50%, 1em);
transition: all .15s ease-in-out;
&::before {
content: '';
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
border: .5em solid transparent;
border-top-color: #000;
transform: translate(-50%, 0);
}
}
}
View Compiled
This Pen doesn't use any external JavaScript resources.