How to Hide Text in a Logo Using CSS
June 7, 2024Next / Previous Post Navigation in WordPress
July 16, 2024A 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.