Tooltips with Positioning (Top, Bottom, Left, Right)

Make your website more user-friendly with tooltips. Offer helpful context and guidance to your visitors.

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.