Icon Only Navbar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Icon-Only Navbar</title>
    <style>
        /*
        ========================================
        CSS Custom Properties (App Theme)
        ========================================
        */
        :root {
            --color-background: #f8f9fa;
            --color-navbar-bg: #ffffff;
            --color-icon-default: #6c757d;
            --color-icon-hover: #007bff;
            --color-icon-active: #007bff;
            --color-tooltip-bg: #343a40;
            --color-tooltip-text: #ffffff;
            --color-border: #dee2e6;

--navbar-height: 70px;
            --transition-speed: 0.2s;
            --font-family-sans-serif: system-ui, -apple-system, sans-serif;
        }

/*
        ========================================
        Base & Page Styles
        ========================================
        */
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; font-family: var(--font-family-sans-serif); background-color: var(--color-background); }
        .content { height: 200vh; padding: calc(var(--navbar-height) + 2rem) 1.5rem; text-align: center; }
        
        /*
        ========================================
        Main Navbar Structure
        ========================================
        */
        .navbar {
            height: var(--navbar-height);
            display: flex; justify-content: center; /* Center the icons container */
            align-items: center;
            position: sticky; top: 0; z-index: 1000;
            background-color: var(--color-navbar-bg);
            border-bottom: 1px solid var(--color-border);
        }

.navbar__nav {
            list-style: none; margin: 0; padding: 0;
            display: flex; gap: 1rem;
        }

.nav-item__link {
            position: relative; /* Anchor for the tooltip */
            display: flex; align-items: center; justify-content: center;
            width: 44px; height: 44px; /* Accessible tap target size */
            color: var(--color-icon-default);
            border-radius: 50%;
            transition: color var(--transition-speed) ease, background-color var(--transition-speed) ease;
        }

.nav-item__link svg {
            width: 24px; height: 24px;
        }

/* --- Hover, Active, and Focus States --- */
        .nav-item__link:hover {
            color: var(--color-icon-hover);
            background-color: rgba(0, 123, 255, 0.1);
        }
        
        .nav-item__link.is-active {
            color: var(--color-icon-active);
        }
        
        .nav-item__link:focus-visible {
            outline: 2px solid var(--color-icon-hover);
            outline-offset: 2px;
        }

/*
        ========================================
        Tooltip Styles (Pure CSS)
        ========================================
        */
        .nav-item__link::before,
        .nav-item__link::after {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            
            /* Hidden by default */
            opacity: 0;
            visibility: hidden;
            pointer-events: none; /* Can't interact with the tooltip */
            
            transition: opacity var(--transition-speed) ease, 
                        transform var(--transition-speed) ease;
        }

/* The tooltip text bubble */
        .nav-item__link::before {
            content: attr(aria-label); /* The tooltip text comes from the aria-label */
            top: calc(100% + 23px);
            padding: 0.5em 0.75em;
            width: max-content; /* Auto-adjust width to content */
            border-radius: 4px;
            background-color: var(--color-tooltip-bg);
            color: var(--color-tooltip-text);
            font-size: 0.875rem; font-weight: 500;
        }
        
        /* The small triangle pointing up */
        .nav-item__link::after {
            content: '';
            top: calc(100% + 13px); /* Position it just above the text bubble */
            border: 5px solid transparent;
            border-bottom-color: var(--color-tooltip-bg);
            color: var(--color-tooltip-bg);
        }
        
        /* Show the tooltip on hover and focus */
        .nav-item__link:hover::before,
        .nav-item__link:hover::after,
        .nav-item__link:focus::before,
        .nav-item__link:focus::after {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(-4px); /* A slight upward animation */
        }
    </style>
</head>
<body>

<main class="content">
        <h1>Icon-Only Navbar</h1>
        <p>Hover or focus on an icon to see its descriptive tooltip.</p>
    </main>

</body>
</html>