CSS Tooltips

Tooltip Positions

bottom: 125%; left: 50%;

top: 125%; left: 50%;

right: 125%; top: 50%;

left: 125%; top: 50%;

🔹 Basic Tooltip with Arrow

A CSS-only tooltip with an arrow uses pseudo-elements (::before, ::after) for the pointer, positioned absolutely relative to the parent. The tooltip box employs border-radius, box-shadow, and padding for styling, while the arrow is created with border tricks or transforms. This method enhances UX by providing contextual hints, definitions, or instructions on hover/focus. Ensure accessibility with ARIA attributes and focus management for keyboard users across all interactive elements.

.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

/* Arrow pointing down */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* Show tooltip on hover */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

🔹 Animated Tooltips

Animated tooltips use CSS transitions or keyframes to fade, slide, or scale into view, improving user perception and engagement. Properties like opacity, transform, and clip-path can be animated for smooth entrances/exits. This subtle motion draws attention without being disruptive. Combine with delay and timing functions for natural behavior. Performance is optimized with will-change and hardware acceleration, ensuring tooltips remain smooth across devices and browser environments.

/* Fade in animation */
.fade-tooltip {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.tooltip:hover .fade-tooltip {
    opacity: 1;
    transform: translateY(0);
}

/* Scale animation */
.scale-tooltip {
    transform: scale(0);
    transition: transform 0.2s ease;
}

.tooltip:hover .scale-tooltip {
    transform: scale(1);
}

/* Slide animation */
.slide-tooltip {
    transform: translateX(-20px);
    opacity: 0;
    transition: all 0.3s ease;
}

.tooltip:hover .slide-tooltip {
    transform: translateX(0);
    opacity: 1;
}

🔹 Styled Tooltips

Modern tooltip designs incorporate rounded corners, subtle shadows, gradient backgrounds, and border highlights for visual polish. Using CSS variables allows theme-aware colors and spacing. Custom shapes, icons, or interactive content can be embedded within tooltips for rich feedback. Ensure they are responsive, avoid clipping on viewport edges, and maintain high contrast for readability. Styled tooltips reinforce brand identity and enhance the overall aesthetic consistency of web applications and sites.

🔸 Modern Glass Tooltip

.glass-tooltip {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.success-tooltip {
    background: linear-gradient(45deg, #56ab2f, #a8e6cf);
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(86, 171, 47, 0.3);
}

.error-tooltip {
    background: linear-gradient(45deg, #ff416c, #ff4757);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(255, 65, 108, 0.3);
}

🔸 Multi-line Tooltip

.multiline-tooltip {
    width: 200px;
    white-space: normal;
    line-height: 1.4;
    background: #2c3e50;
    color: #ecf0f1;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.multiline-tooltip h4 {
    margin: 0 0 8px 0;
    color: #3498db;
    font-size: 14px;
}

.multiline-tooltip p {
    margin: 0;
    font-size: 12px;
}

🔹 Responsive Tooltips

Responsive tooltips adapt to screen size and touch interactions using media queries, viewport units, and flexible positioning. Techniques include switching arrow direction, adjusting max-width, or changing to modal-like overlays on small screens. Ensure tooltips do not overflow viewports or obscure critical content. Testing across breakpoints guarantees usability on mobile, tablet, and desktop. Accessibility considerations include larger touch targets and ensuring tooltip triggers are easily tappable on touch devices.

/* Responsive tooltip */
@media (max-width: 768px) {
    .tooltip .tooltiptext {
        width: 200px;
        margin-left: -100px;
        font-size: 14px;
    }
}

/* Touch devices */
@media (hover: none) {
    .tooltip:active .tooltiptext {
        visibility: visible;
        opacity: 1;
    }
}