Floating Icon Bar with tooltips

A Floating Icon Bar with tooltips is super useful on a website for several reasons. First, it enhances user experience by giving quick access to main functions or frequently visited pages, so users don’t have to navigate through multiple menus. Second, the tooltips provide immediate context, so users know what each icon means. This will also make the site look cleaner and less cluttered.

HTML

<div class="sf-sliding-bar">
    <a class="bar-item item-has-tooltip" data-tooltip="Visit our Facebook" target="_blank" href="#"><i class="fa-brands fa-facebook-f"></i></a>
    <a class="bar-item item-has-tooltip" data-tooltip="Follow us on X" target="_blank" href="#"><i class="fa-brands fa-x-twitter"></i></a>
    <a class="bar-item item-has-tooltip" data-tooltip="Order Samples" href="#"><i class="fa-solid fa-dolly"></i></a>
</div>

CSS for Icon Bar with tooltips

/* ---------------------------------------------------------- */
/*           Snippflow Floating Icon Bar with tooltips        */
/* ---------------------------------------------------------- */

.sf-sliding-bar { 
    display: flex; 
    flex-direction: column; 
    gap: 5px; 
    position: fixed; 
    right: 0; 
    top: 50%; 
    transform: translateY(-50%); 
    z-index: 9999; 
}
.sf-sliding-bar a.bar-item { 
    display: flex; 
    justify-content: center; 
    align-items: center;
    position:relative;
    width: 50px; 
    height: 50px; 
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    color: #3d4c6f;
    background-color: #fff; 
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,.06);
    border-radius: 4px 0 0 4px;
    transition: all 0.2s ease-out;
}
.sf-sliding-bar a:hover.bar-item {
    color: #11151d;
}

.sf-sliding-bar a.bar-item::before,
.sf-sliding-bar a.bar-item::after {
    display: block;
    position: absolute;
    right: 100%;
    top: 50%;
    z-index: 1;
    opacity: 0;
    background: #11151d;
    pointer-events: none; 
    transition: transform 0.2s ease-out;
}
.sf-sliding-bar a.bar-item::before {
    content: attr(data-tooltip);
    max-width: 250px;
    width: 100%;
    width: max-content;
    text-align: center;
    transform: translate(0, -50%);
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 3px;
    box-shadow: 0 0 15px rgba(0,0,0,.15);
    color: #fff;
}
.sf-sliding-bar a.bar-item::after {
    content: "";
    transform: translate(5px, -5px) rotate(45deg);
    width: 10px;
    height: 10px;
    border-radius: 2px; 
}

.sf-sliding-bar a.bar-item:hover::before {
    transform: translate(-10px, -50%);
}
.sf-sliding-bar a.bar-item:hover::after {
    transform: translate(-60%, -5px) rotate(45deg);
}
.sf-sliding-bar a.bar-item:hover::before, 
.sf-sliding-bar a.bar-item:hover::after {
    opacity: 1;
}

/* Responsive */
@media only screen and (max-width: 767px) {
	.sf-sliding-bar { 
        display: none; 
    }
}

See also

• Back to Top button with smooth scroll
• Sticky Footer with Flexbox
• Sticky Bottom Navigation Bar with Hover Effects
• Tooltips with Positioning (Top, Bottom, Left, Right)
• Flexbox button with 3 styles and variations

Result

See the Pen Floating Icon Bar with tooltips by Snippflow (@snippflow) on CodePen.