Data Tooltips
Top
Right
Bottom
Left
HTML
<span data-tooltip="A sample text">Top</span>
<span data-tooltip="Right tooltip text" data-tooltip-location="right">Right</span>
<span data-tooltip="This is an example of a super long tooltip text that goes over multiple lines. 
 
 Note: The tooltip size is dynamically adjusted to the content. However, a minimum and a maximum width are defined." data-tooltip-location="bottom">Bottom</span>
<span data-tooltip="Example Tooltip" data-tooltip-location="left">Left</span>CSS
[data-tooltip]{position:relative;border-bottom:.1rem dotted #31344b}
[data-tooltip]:hover{z-index:10}
[data-tooltip]::before,[data-tooltip]::after{position:absolute;left:50%;bottom:calc(100% + .5rem);opacity:0;visibility:hidden;pointer-events:none;transition:.2s;will-change:transform}
[data-tooltip]::before{content:attr(data-tooltip);display:inline-block;font-size:1.4rem;color:#fff;text-align:center;white-space:pre-wrap;padding:1rem 1.8rem;min-width:15rem;max-width:35rem;width:max-content;border-radius:.6rem;background-color:rgba(59,72,80,0.9);background-image:linear-gradient(30deg,rgba(59,72,80,0.44),rgba(59,68,75,0.44),rgba(60,82,88,0.44));box-shadow:0 0 2.4rem rgba(0,0,0,0.2);transform:translate(-50%,-0.5rem) scale(0.5)}
[data-tooltip]::after{content:'';border-style:solid;border-width:.5rem .5rem 0;border-color:rgba(55,64,70,0.9) transparent transparent;transition-duration:0;transform-origin:top;transform:translateX(-50%) scaleY(0)}
[data-tooltip]:hover::before,[data-tooltip]:hover::after{visibility:visible;opacity:1}
[data-tooltip]:hover::before{transition-delay:.3s;transform:translate(-50%,-0.5rem) scale(1)}
[data-tooltip]:hover::after{transition-delay:.5s;transition-duration:.2s;transform:translateX(-50%) scaleY(1)}
[data-tooltip-location="right"]::before,[data-tooltip-location="right"]::after{left:calc(100% + .5rem);bottom:50%}
[data-tooltip-location="right"]::before{transform:translate(0.5rem,50%) scale(0.5)}
[data-tooltip-location="right"]::after{border-width:.5rem .5rem .5rem 0;border-color:transparent rgba(55,64,70,0.9) transparent transparent;transform-origin:right;transform:translateY(50%) scaleX(0)}
[data-tooltip-location="right"]:hover::before{transform:translate(0.5rem,50%) scale(1)}
[data-tooltip-location="right"]:hover::after{transform:translateY(50%) scaleX(1)}
[data-tooltip-location="bottom"]::before,[data-tooltip-location="bottom"]::after{top:calc(100% + .5rem);bottom:auto}
[data-tooltip-location="bottom"]::before{transform:translate(-50%,0.5rem) scale(0.5)}
[data-tooltip-location="bottom"]::after{border-width:0 .5rem .5rem;border-color:transparent transparent rgba(55,64,70,0.9);transform-origin:bottom}
[data-tooltip-location="bottom"]:hover::before{transform:translate(-50%,0.5rem) scale(1)}
[data-tooltip-location="left"]::before,[data-tooltip-location="left"]::after{left:auto;right:calc(100% + .5rem);bottom:50%}
[data-tooltip-location="left"]::before{transform:translate(-0.5rem,50%) scale(0.5)}
[data-tooltip-location="left"]::after{border-width:.5rem 0 .5rem .5rem;border-color:transparent transparent transparent rgba(55,64,70,0.9);transform-origin:left;transform:translateY(50%) scaleX(0)}
[data-tooltip-location="left"]:hover::before{transform:translate(-0.5rem,50%) scale(1)}
[data-tooltip-location="left"]:hover::after{transform:translateY(50%) scaleX(1)}SCSS
[data-tooltip] {
position: relative;
border-bottom: .1rem dotted #31344b;
&:hover {
z-index: 10;
}
&::before,
&::after {
position: absolute;
left: 50%;
bottom: calc(100% + .5rem);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: 0.2s;
will-change: transform;
}
&::before {
content: attr(data-tooltip);
display: inline-block;
font-size: 1.4rem;
color: #ffffff;
text-align: center;
white-space: pre-wrap;
padding: 1rem 1.8rem;
min-width: 15rem;
max-width: 35rem;
width: max-content;
border-radius: .6rem;
background-color: rgba(59, 72, 80, 0.9);
background-image: linear-gradient(30deg, rgba(59, 72, 80, 0.44), rgba(59, 68, 75, 0.44), rgba(60, 82, 88, 0.44));
box-shadow: 0 0 2.4rem rgba(0, 0, 0, 0.2);
transform: translate(-50%, -.5rem) scale(0.5);
}
&::after {
content: '';
border-style: solid;
border-width: .5rem .5rem 0 .5rem;
border-color: rgba(55, 64, 70, 0.9) transparent transparent transparent;
transition-duration: 0s;
transform-origin: top;
transform: translateX(-50%) scaleY(0);
}
&:hover {
&::before,
&::after {
visibility: visible;
opacity: 1;
}
&::before {
transition-delay: 0.3s;
transform: translate(-50%, -.5rem) scale(1);
}
&::after {
transition-delay: 0.5s;
transition-duration: 0.2s;
transform: translateX(-50%) scaleY(1);
}
}
}
[data-tooltip-location="right"] {
&::before,
&::after {
left: calc(100% + .5rem);
bottom: 50%;
}
&::before {
transform: translate(.5rem, 50%) scale(0.5);
}
&::after {
border-width: .5rem .5rem .5rem 0;
border-color: transparent rgba(55, 64, 70, 0.9) transparent transparent;
transform-origin: right;
transform: translateY(50%) scaleX(0);
}
&:hover {
&::before {
transform: translate(.5rem, 50%) scale(1);
}
&::after {
transform: translateY(50%) scaleX(1);
}
}
}
[data-tooltip-location="bottom"] {
&::before,
&::after {
top: calc(100% + .5rem);
bottom: auto;
}
&::before {
transform: translate(-50%, .5rem) scale(0.5);
}
&::after {
border-width: 0 .5rem .5rem .5rem;
border-color: transparent transparent rgba(55, 64, 70, 0.9) transparent;
transform-origin: bottom;
}
&:hover {
&::before {
transform: translate(-50%, .5rem) scale(1);
}
}
}
[data-tooltip-location="left"] {
&::before,
&::after {
left: auto;
right: calc(100% + .5rem);
bottom: 50%;
}
&::before {
transform: translate(-.5rem, 50%) scale(0.5);
}
&::after {
border-width: .5rem 0 .5rem .5rem;
border-color: transparent transparent transparent rgba(55, 64, 70, 0.9);
transform-origin: left;
transform: translateY(50%) scaleX(0);
}
&:hover {
&::before {
transform: translate(-.5rem, 50%) scale(1);
}
&::after {
transform: translateY(50%) scaleX(1);
}
}
}