Center elements with flexbox
July 25, 2024Back to Top button with smooth scroll
July 29, 2024A tooltip on a website is a small, informative popup that appears when a user hovers over an element, providing additional context or guidance. This enhances user experience by offering helpful information without cluttering the interface.
HTML
<span class="sf-tooltip" data-tooltip="Tooltip content" tooltip-position="top">Tooltip Top</span>
<span class="sf-tooltip" data-tooltip="Tooltip content" tooltip-position="right">Tooltip Right</span>
<span class="sf-tooltip" data-tooltip="Tooltip content" tooltip-position="bottom">Tooltip Bottom</span>
<span class="sf-tooltip" data-tooltip="Tooltip content" tooltip-position="left">Tooltip Left</span>
CSS
/* ---------------------------------------------------------- */
/* Snippflow Tooltip */
/* ---------------------------------------------------------- */
.sf-tooltip{
display:inline;
position:relative;
border-width: 0 0 1px 0;
border-style:dotted;
}
.sf-tooltip:before,
.sf-tooltip:after {
position: absolute;
z-index: 99;
opacity: 0;
pointer-events: none;
background: #212121;
color: #fff;
transition: transform 0.2s ease-out;
}
.sf-tooltip:before{
content: attr(data-tooltip);
max-width: 250px;
width: 100%;
width: max-content;
bottom: 100%;
left: 50%;
text-align: center;
padding: 7px 15px;
font-size: 13px;
line-height: 1.5;
transform: translate(-50%, 0);
border-radius: 3px;
}
.sf-tooltip:after {
content: "";
display: block;
bottom: 100%;
left: 50%;
width: 10px;
height: 10px;
border-radius: 2px;
margin-bottom: -4px;
transform: translate(-50%, 0) rotate(45deg);
}
.sf-tooltip:hover:before {
opacity: 1;
transform: translate(-50%, -10px);
}
.sf-tooltip:hover:after {
opacity: 1;
transform: translate(-50%, -10px) rotate(45deg);
}
/* Position: Bottom */
.sf-tooltip[tooltip-position="bottom"]:before,
.sf-tooltip[tooltip-position="bottom"]:after {
top: 100%;
bottom: auto;
}
.sf-tooltip[tooltip-position="bottom"]:before {
transform: translate(-50%, 0);
}
.sf-tooltip[tooltip-position="bottom"]:after {
transform: translate(-50%, 0) rotate(45deg);
}
.sf-tooltip[tooltip-position="bottom"]:hover:before {
opacity: 1;
transform: translate(-50%, 10px);
}
.sf-tooltip[tooltip-position="bottom"]:hover:after {
transform: translate(-50%, 10px) rotate(45deg);
margin-top: -4px;
}
/* Position: Left */
.sf-tooltip[tooltip-position="left"]:before,
.sf-tooltip[tooltip-position="left"]:after {
left: auto;
bottom: auto;
right: 100%;
top: 50%;
}
.sf-tooltip[tooltip-position="left"]:before {
transform: translate(0, -50%);
}
.sf-tooltip[tooltip-position="left"]:after {
transform: translate(5px, -5px) rotate(45deg);
}
.sf-tooltip[tooltip-position="left"]:hover:before {
transform: translate(-10px, -50%);
}
.sf-tooltip[tooltip-position="left"]:hover:after {
transform: translate(-60%, -5px) rotate(45deg);
}
/* Position: Right */
.sf-tooltip[tooltip-position="right"]:before,
.sf-tooltip[tooltip-position="right"]:after {
left: 100%;
bottom: auto;
right: auto;
top: 50%;
}
.sf-tooltip[tooltip-position="right"]:before {
transform: translate(0, -50%);
}
.sf-tooltip[tooltip-position="right"]:after {
transform: translate(-5px, -5px) rotate(45deg);
}
.sf-tooltip[tooltip-position="right"]:hover:before {
transform: translate(10px, -50%);
}
.sf-tooltip[tooltip-position="right"]:hover:after {
transform: translate(60%, -5px) rotate(45deg);
}
Result:
See the Pen Tooltip with Positioning (Top, Bottom, Left, Right) by Snippflow (@snippflow) on CodePen.