How to Hide Text in a Logo Using CSS
June 7, 2024
Next / Previous Post Navigation in WordPress
July 16, 2024

June 19, 2024

Floating Icon Bar with tooltips

Table of contents

A Floating Icon Bar with tooltips can be extremely useful on a website for several reasons. Firstly, it enhances user experience by providing quick access to essential functions or frequently visited pages, saving users from navigating through multiple menus. Secondly, the tooltips offer immediate contextual information, guiding users and reducing confusion about what each icon represents. This feature can also improve the overall aesthetic of the site, as it keeps the interface clean and uncluttered.

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

/* ---------------------------------------------------------- */
/*           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; 
    }
}

Result:

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

Table of contents

Advert

Leave a Reply

Your email address will not be published. Required fields are marked *

Floating Icon Bar with tooltips
This website uses cookies to improve your experience. By using this website you agree to our Data Protection Policy.
Read more