پرش به مطلب اصلی

Tooltip

تولتیپ یک راهکار ساده برای نمایش پاپ‌آپ‌های استایل‌دهی‌شده با استفاده از قابلیت‌های Bootstrap است که امکان نمایش پیام‌های کوتاه در حالت‌ها و رنگ‌های مختلف را فراهم می‌کند.

ویژگی‌ها​

  • پشتیبانی از موقعیت‌های مختلف (بالا، پایین، چپ، راست)
  • قابلیت تعیین کلاس سفارشی برای نمایش در رنگ‌ها و وضعیت‌های مختلف
  • بدون نیاز به اسکریپت‌نویسی دستی (با استفاده از Bootstrap Tooltip)
  • طراحی سازگار با تم‌ها و حالت RTL

ورودی‌های کامپوننت​

نام پراپ / اتریبیوتمقدار مجازتوضیحات
data-bs-toggle"tooltip"فعال‌کننده اصلی تولتیپ — اجباری
data-bs-placementtop, bottom, left, rightموقعیت نمایش تولتیپ نسبت به عنصر
data-bs-custom-classdefault-tooltip, success-tooltip, ...کلاس سفارشی برای استایل‌دهی به تولتیپ
titleمتنمحتوای تولتیپ که هنگام هاور نمایش داده می‌شود

کلاس‌های سفارشی​

نام کلاستوضیحات
default-tooltipاستایل پیش‌فرض تولتیپ
success-tooltipتولتیپ موفق
error-tooltipتولتیپ خطا
warning-tooltipتولتیپ هشدار
info-tooltipتولتیپ اطلاع‌رسانی
primary-tooltipتولتیپ با رنگ اصلی برند

مثال‌ها​

نمونه پایه​

<ul class="d-flex w-100 justify-content-around flex-wrap gap-4">
    <li>
        <span
            data-bs-toggle="tooltip"
            data-bs-custom-class="default-tooltip"
            data-bs-placement="top"
            title="تولتیپ default"
        >
            تولتیپ default
        </span>
    </li>
    <li>
        <span
            data-bs-toggle="tooltip"
            data-bs-custom-class="success-tooltip"
            data-bs-placement="top"
            title="تولتیپ success"
        >
            تولتیپ success
        </span>
    </li>
    <li>
        <span
            data-bs-toggle="tooltip"
            data-bs-custom-class="error-tooltip"
            data-bs-placement="top"
            title="تولتیپ error"
        >
            تولتیپ error
        </span>
    </li>
    <li>
        <span
            data-bs-toggle="tooltip"
            data-bs-custom-class="warning-tooltip"
            data-bs-placement="top"
            title="تولتیپ warning"
        >
            تولتیپ warning
        </span>
    </li>
    <li>
        <span 
            data-bs-toggle="tooltip"
            data-bs-custom-class="info-tooltip"
            data-bs-placement="top"
            title="تولتیپ info"
        >
            تولتیپ info
        </span>
    </li>
    <li>
        <span
            data-bs-toggle="tooltip"
            data-bs-custom-class="primary-tooltip"
            data-bs-placement="top"
            title="تولتیپ primary"
        >
            تولتیپ primary
        </span>
    </li>
</ul>