راهنمای ابزار (Tooltip)

ساخت Tooltip زیبا با CSS خالص — بدون نیاز به JavaScript

Tooltip چیست؟

Tooltip کادر کوچکی است که با هاور روی یک عنصر ظاهر می‌شود و توضیح اضافه می‌دهد.

CSS Tooltip

.tooltip {
        position: relative;
        cursor: help;
        border-bottom: 1px dashed #3498db;
    }
    .tooltip-text {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        bottom: 125%;
        left: 50%;
        transform: translateX(-50%);
        background: #2c3e50;
        color: white;
        padding: 8px 12px;
        border-radius: 6px;
        white-space: nowrap;
        transition: all 0.3s;
        z-index: 100;
    }
    .tooltip:hover .tooltip-text {
        visibility: visible;
        opacity: 1;
    }

فلش Tooltip

.tooltip-text::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: #2c3e50;
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط