Dropdown، Tooltip و Popover در Bootstrap

در رابط‌های کاربری واقعی معمولاً لازم نیست همه امکانات و اطلاعات را به‌صورت مستقیم روی صفحه نمایش دهیم. گاهی لازم است کاربر با کلیک روی یک دکمه، مجموعه‌ای از گزینه‌ها را مشاهده کند؛ گاهی هنگام قرار گرفتن ماوس روی یک دکمه یا آیکون، توضیح کوتاهی نمایش داده شود و در بعضی مواقع نیز لازم است اطلاعات بیشتری در کنار یک عنصر به کاربر ارائه کنیم. Bootstrap برای این نیازها کامپوننت‌هایی مانند Dropdown، Tooltip و Popover را در اختیار ما قرار می‌دهد. Dropdown بیشتر برای نمایش منو و مجموعه‌ای از عملیات استفاده می‌شود، Tooltip برای نمایش توضیح کوتاه و Popover برای نمایش اطلاعات کامل‌تر و تعاملی‌تر کاربرد دارد. در این مقاله ابتدا ساخت Dropdown را یاد می‌گیریم، سپس نحوه ایجاد Tooltip و Popover را بررسی می‌کنیم و در ادامه با JavaScript API، رویدادها، جهت نمایش، حالت‌های مختلف و نکات دسترس‌پذیری آشنا می‌شویم. در پایان نیز هر سه کامپوننت را در یک صفحه واقعی و Responsive با زبان فارسی و حالت RTL ترکیب خواهیم کرد.

Dropdown چیست؟

Dropdown یک منوی بازشونده است که معمولاً بعد از کلیک روی یک دکمه یا لینک نمایش داده می‌شود.

برای مثال در یک پنل مدیریت ممکن است کاربر با کلیک روی دکمه «عملیات» گزینه‌های زیر را مشاهده کند:

• مشاهده

• ویرایش

• حذف

• تغییر وضعیت

ساختار ساده Dropdown در Bootstrap به شکل زیر است:

Button
  ↓
Dropdown Menu
  ├── Item
  ├── Item
  ├── Divider
  └── Item

ساخت یک Dropdown ساده

یک Dropdown ساده از چند کلاس اصلی تشکیل می‌شود:

• dropdown

• dropdown-toggle

• dropdown-menu

• dropdown-item

نمونه:

<div class="dropdown">
    <button
        class="btn btn-primary dropdown-toggle"
        type="button"
        data-bs-toggle="dropdown">
        عملیات
    </button>

    <ul class="dropdown-menu">
        <li>
            <a class="dropdown-item" href="#">مشاهده</a>
        </li>

        <li>
            <a class="dropdown-item" href="#">ویرایش</a>
        </li>

        <li>
            <a class="dropdown-item" href="#">حذف</a>
        </li>
    </ul>
</div>

مهم‌ترین قسمت این کد ویژگی زیر است:

data-bs-toggle="dropdown"

این ویژگی به Bootstrap اعلام می‌کند که عنصر موردنظر یک Dropdown را کنترل می‌کند.

استفاده از Dropdown با لینک

Dropdown فقط مخصوص button نیست و می‌توان از لینک نیز استفاده کرد:

<div class="dropdown">
    <a
        class="btn btn-secondary dropdown-toggle"
        href="#"
        role="button"
        data-bs-toggle="dropdown">
        انتخاب گزینه
    </a>

    <ul class="dropdown-menu">
        <li>
            <a class="dropdown-item" href="#">گزینه اول</a>
        </li>

        <li>
            <a class="dropdown-item" href="#">گزینه دوم</a>
        </li>

        <li>
            <a class="dropdown-item" href="#">گزینه سوم</a>
        </li>
    </ul>
</div>

Divider در Dropdown

اگر بخواهیم بین گروه‌های مختلف گزینه‌ها فاصله و خط جداکننده ایجاد کنیم، از dropdown-divider استفاده می‌کنیم:

<ul class="dropdown-menu">

    <li>
        <a class="dropdown-item" href="#">پروفایل</a>
    </li>

    <li>
        <a class="dropdown-item" href="#">تنظیمات</a>
    </li>

    <li>
        <hr class="dropdown-divider">
    </li>

    <li>
        <a class="dropdown-item" href="#">خروج</a>
    </li>

</ul>

این ویژگی برای جدا کردن عملیات مرتبط از گزینه‌هایی مانند خروج از حساب کاربری بسیار کاربردی است.

Dropdown Header

در منوهای بزرگ‌تر می‌توان برای دسته‌بندی گزینه‌ها از dropdown-header استفاده کرد.

<ul class="dropdown-menu">

    <li>
        <h6 class="dropdown-header">
            حساب کاربری
        </h6>
    </li>

    <li>
        <a class="dropdown-item" href="#">پروفایل</a>
    </li>

    <li>
        <a class="dropdown-item" href="#">تنظیمات</a>
    </li>

    <li>
        <h6 class="dropdown-header">
            مدیریت
        </h6>
    </li>

    <li>
        <a class="dropdown-item" href="#">کاربران</a>
    </li>

</ul>

گزینه فعال

برای نمایش گزینه‌ای که در حال حاضر انتخاب شده است، می‌توان از active استفاده کرد:

<ul class="dropdown-menu">

    <li>
        <a class="dropdown-item active" href="#">
            داشبورد
        </a>
    </li>

    <li>
        <a class="dropdown-item" href="#">
            پروفایل
        </a>
    </li>

</ul>

گزینه غیرفعال

برای غیرفعال کردن یک گزینه:

<ul class="dropdown-menu">

    <li>
        <a class="dropdown-item" href="#">
            مشاهده
        </a>
    </li>

    <li>
        <a class="dropdown-item disabled" href="#">
            ویرایش
        </a>
    </li>

</ul>

کلاس disabled باعث می‌شود گزینه ظاهر غیرفعال داشته باشد و تعامل معمول با آن انجام نشود.

جهت‌های مختلف Dropdown

Bootstrap امکان نمایش Dropdown در جهت‌های مختلف را فراهم می‌کند.

Dropup

در حالت عادی منو به سمت پایین باز می‌شود.

برای باز شدن منو به سمت بالا:

<div class="dropup">
    <button
        class="btn btn-primary dropdown-toggle"
        data-bs-toggle="dropdown">
        باز کردن
    </button>

    <ul class="dropdown-menu">
        <li>
            <a class="dropdown-item" href="#">گزینه اول</a>
        </li>

        <li>
            <a class="dropdown-item" href="#">گزینه دوم</a>
        </li>
    </ul>
</div>

Dropend

برای باز شدن منو در سمت انتهایی:

<div class="dropend">
    <button
        class="btn btn-primary dropdown-toggle"
        data-bs-toggle="dropdown">
        باز کردن
    </button>

    <ul class="dropdown-menu">
        <li>
            <a class="dropdown-item" href="#">گزینه اول</a>
        </li>
    </ul>
</div>

Dropstart

برای باز شدن منو از سمت ابتدایی:

<div class="dropstart">
    <button
        class="btn btn-primary dropdown-toggle"
        data-bs-toggle="dropdown">
        باز کردن
    </button>

    <ul class="dropdown-menu">
        <li>
            <a class="dropdown-item" href="#">گزینه اول</a>
        </li>
    </ul>
</div>

قرار دادن Dropdown در سمت راست منو

با dropdown-menu-end می‌توان منو را در سمت انتهایی تراز کرد:

<div class="dropdown">
    <button
        class="btn btn-primary dropdown-toggle"
        data-bs-toggle="dropdown">
        منو
    </button>

    <ul class="dropdown-menu dropdown-menu-end">
        <li>
            <a class="dropdown-item" href="#">پروفایل</a>
        </li>

        <li>
            <a class="dropdown-item" href="#">تنظیمات</a>
        </li>
    </ul>
</div>

در صفحات RTL این موضوع اهمیت بیشتری دارد، زیرا مفهوم شروع و پایان با صفحات LTR متفاوت است.

Split Button Dropdown

گاهی می‌خواهیم خود دکمه یک عملیات اصلی داشته باشد و فلش کنار آن فقط Dropdown را باز کند.

برای این کار از btn-group استفاده می‌کنیم:

<div class="btn-group">

    <button type="button" class="btn btn-primary">
        ذخیره
    </button>

    <button
        type="button"
        class="btn btn-primary dropdown-toggle dropdown-toggle-split"
        data-bs-toggle="dropdown">
        <span class="visually-hidden">
            نمایش گزینه‌ها
        </span>
    </button>

    <ul class="dropdown-menu">
        <li>
            <a class="dropdown-item" href="#">
                ذخیره و انتشار
            </a>
        </li>

        <li>
            <a class="dropdown-item" href="#">
                ذخیره به‌عنوان پیش‌نویس
            </a>
        </li>
    </ul>

</div>

این روش در پنل‌های مدیریت بسیار کاربردی است.

Dropdown در Navbar

Dropdown معمولاً در Navbar نیز استفاده می‌شود.

<nav class="navbar navbar-expand-lg bg-dark navbar-dark">

    <div class="container">

        <a class="navbar-brand" href="#">
            سایت من
        </a>

        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#mainNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="mainNavbar">

            <ul class="navbar-nav">

                <li class="nav-item">
                    <a class="nav-link" href="#">
                        خانه
                    </a>
                </li>

                <li class="nav-item dropdown">

                    <a
                        class="nav-link dropdown-toggle"
                        href="#"
                        data-bs-toggle="dropdown">
                        محصولات
                    </a>

                    <ul class="dropdown-menu">

                        <li>
                            <a class="dropdown-item" href="#">
                                محصول اول
                            </a>
                        </li>

                        <li>
                            <a class="dropdown-item" href="#">
                                محصول دوم
                            </a>
                        </li>

                    </ul>

                </li>

            </ul>

        </div>

    </div>

</nav>

نکته مهم درباره منوهای تو در تو

Bootstrap به‌صورت پیش‌فرض یک سیستم کامل برای Dropdownهای چندسطحی یا Nested Dropdown ارائه نمی‌کند.

یعنی نباید انتظار داشته باشیم چنین ساختاری بدون کدنویسی اضافه به‌صورت کامل مدیریت شود:

Products
  ├── Web
  │    ├── Frontend
  │    └── Backend
  └── Mobile

برای چنین منوهایی معمولاً به JavaScript و CSS سفارشی یا یک راهکار مناسب دیگر نیاز داریم.

کنترل Dropdown با JavaScript

Bootstrap علاوه بر data-bs-* API، API جاوااسکریپتی نیز ارائه می‌کند.

مثال:

<button
    id="dropdownButton"
    class="btn btn-primary dropdown-toggle"
    data-bs-toggle="dropdown">
    عملیات
</button>

<ul id="myDropdown" class="dropdown-menu">
    <li>
        <a class="dropdown-item" href="#">
            ویرایش
        </a>
    </li>
</ul>

سپس:

const button = document.getElementById("dropdownButton");

const dropdown =
    bootstrap.Dropdown.getOrCreateInstance(button);

dropdown.show();

برای بستن:

dropdown.hide();

برای تغییر وضعیت:

dropdown.toggle();

رویدادهای Dropdown

Bootstrap برای Dropdown چند Event در اختیار ما قرار می‌دهد:

• show.bs.dropdown

• shown.bs.dropdown

• hide.bs.dropdown

• hidden.bs.dropdown

مثال:

const button = document.getElementById("dropdownButton");

button.addEventListener("shown.bs.dropdown", function () {
    console.log("Dropdown opened");
});

Tooltip چیست؟

Tooltip یک پیام کوتاه و معمولاً غیرتعاملی است که اطلاعات مختصری درباره یک عنصر ارائه می‌دهد.

برای مثال:

• توضیح یک آیکون

• توضیح یک دکمه

• نمایش معنی یک گزینه

• نمایش اطلاعات کوتاه

مثلاً:

Save Button
    ↓
"Save changes"

Tooltip نباید جایگزین اطلاعات ضروری صفحه باشد.

ساخت Tooltip

Tooltip در Bootstrap کمی متفاوت از Dropdown است.

ابتدا HTML را ایجاد می‌کنیم:

<button
    type="button"
    class="btn btn-primary"
    data-bs-toggle="tooltip"
    data-bs-title="ذخیره تغییرات">
    ذخیره
</button>

اما فقط قرار دادن data-bs-toggle="tooltip" کافی نیست.

Tooltip در Bootstrap به‌صورت opt-in عمل می‌کند و باید با JavaScript فعال شود.

const tooltipTriggerList =
    document.querySelectorAll(
        '[data-bs-toggle="tooltip"]'
    );

const tooltipList =
    [...tooltipTriggerList].map(
        element => new bootstrap.Tooltip(element)
    );

اکنون Tooltip فعال می‌شود.

استفاده از title

در نسخه‌های Bootstrap 5 می‌توان از title نیز استفاده کرد:

<button
    type="button"
    class="btn btn-secondary"
    data-bs-toggle="tooltip"
    title="ویرایش اطلاعات">
    ویرایش
</button>

همچنین می‌توان از data-bs-title استفاده کرد:

<button
    type="button"
    class="btn btn-secondary"
    data-bs-toggle="tooltip"
    data-bs-title="ویرایش اطلاعات">
    ویرایش
</button>

محل نمایش Tooltip

Tooltip می‌تواند در موقعیت‌های مختلف نمایش داده شود.

بالا

<button
    class="btn btn-primary"
    data-bs-toggle="tooltip"
    data-bs-placement="top"
    data-bs-title="توضیح کوتاه">
    دکمه
</button>

پایین

<button
    class="btn btn-primary"
    data-bs-toggle="tooltip"
    data-bs-placement="bottom"
    data-bs-title="توضیح کوتاه">
    دکمه
</button>

شروع

<button
    class="btn btn-primary"
    data-bs-toggle="tooltip"
    data-bs-placement="start"
    data-bs-title="توضیح کوتاه">
    دکمه
</button>

پایان

<button
    class="btn btn-primary"
    data-bs-toggle="tooltip"
    data-bs-placement="end"
    data-bs-title="توضیح کوتاه">
    دکمه
</button>

استفاده از start و end برای طراحی‌های RTL و LTR مناسب‌تر از وابستگی مستقیم به چپ و راست است.

Tooltip روی آیکون

Tooltip برای آیکون‌هایی که ممکن است مفهوم آن‌ها برای کاربر مشخص نباشد بسیار کاربردی است.

<button
    type="button"
    class="btn btn-outline-secondary"
    data-bs-toggle="tooltip"
    data-bs-title="ویرایش اطلاعات">
    ✏️
</button>

اما اگر یک آیکون نقش اصلی یک دکمه را دارد، نباید تنها به Tooltip برای نام قابل دسترس آن تکیه کنیم.

مثلاً بهتر است:

<button
    type="button"
    class="btn btn-outline-secondary"
    aria-label="ویرایش اطلاعات"
    data-bs-toggle="tooltip"
    data-bs-title="ویرایش اطلاعات">
    ✏️
</button>

Tooltip روی دکمه غیرفعال

عناصر دارای disabled معمولاً نمی‌توانند تعامل لازم برای Tooltip را دریافت کنند.

به همین دلیل اگر لازم باشد روی یک دکمه غیرفعال Tooltip نمایش دهیم، بهتر است دکمه را داخل یک عنصر قابل تعامل قرار دهیم.

<span
    class="d-inline-block"
    tabindex="0"
    data-bs-toggle="tooltip"
    data-bs-title="برای فعال شدن این گزینه ابتدا اطلاعات را کامل کنید">

    <button
        class="btn btn-primary"
        type="button"
        disabled>
        ادامه
    </button>

</span>

کنترل Tooltip با JavaScript

می‌توان Tooltip را با JavaScript نیز کنترل کرد:

const element =
    document.getElementById("myTooltip");

const tooltip =
    bootstrap.Tooltip.getOrCreateInstance(element);

نمایش:

tooltip.show();

مخفی کردن:

tooltip.hide();

و حذف کامل:

tooltip.dispose();

Popover چیست؟

Popover شباهت زیادی به Tooltip دارد، اما برای نمایش اطلاعات بیشتر طراحی شده است.

Tooltip:

Short Hint

Popover:

Title

More detailed information

بنابراین می‌توان گفت:

Tooltip برای توضیح کوتاه و Popover برای اطلاعات کامل‌تر مناسب است.

ساخت Popover

ابتدا HTML:

<button
    type="button"
    class="btn btn-primary"
    data-bs-toggle="popover"
    data-bs-title="اطلاعات کاربر"
    data-bs-content="این حساب کاربری هنوز تأیید نشده است.">
    اطلاعات
</button>

سپس باید Popover را با JavaScript فعال کنیم:

const popoverTriggerList =
    document.querySelectorAll(
        '[data-bs-toggle="popover"]'
    );

const popoverList =
    [...popoverTriggerList].map(
        element => new bootstrap.Popover(element)
    );

اکنون با کلیک روی دکمه، Popover نمایش داده می‌شود.

Popover با عنوان و محتوا

در Popover معمولاً دو بخش اصلی داریم:

data-bs-title

برای عنوان:

data-bs-title="وضعیت سفارش"

و:

data-bs-content

برای محتوای اصلی:

data-bs-content="سفارش شما در حال پردازش است."

نمونه کامل:

<button
    type="button"
    class="btn btn-info"
    data-bs-toggle="popover"
    data-bs-title="وضعیت سفارش"
    data-bs-content="سفارش شما در حال پردازش است.">
    مشاهده وضعیت
</button>

محل نمایش Popover

مانند Tooltip، Popover نیز می‌تواند در موقعیت‌های مختلف نمایش داده شود.

<button
    type="button"
    class="btn btn-primary"
    data-bs-toggle="popover"
    data-bs-placement="top"
    data-bs-title="اطلاعات"
    data-bs-content="توضیحات بیشتر">
    نمایش
</button>

یا:

data-bs-placement="bottom"

یا:

data-bs-placement="start"

یا:

data-bs-placement="end"

Trigger در Popover

Popover معمولاً با کلیک فعال می‌شود.

می‌توان رفتار فعال شدن آن را نیز مشخص کرد.

مثلاً:

<button
    type="button"
    class="btn btn-primary"
    data-bs-toggle="popover"
    data-bs-trigger="focus"
    data-bs-title="اطلاعات"
    data-bs-content="برای بستن روی قسمت دیگری از صفحه کلیک کنید.">
    اطلاعات
</button>

مقدار focus باعث می‌شود Popover با از دست رفتن Focus بسته شود.

سایر حالت‌های رایج شامل:

click
hover
focus
manual

است.

برای مثال:

data-bs-trigger="hover"

یا:

data-bs-trigger="focus"

Popover قابل بستن با کلیک بیرون

یک الگوی کاربردی این است که Popover هنگام دریافت Focus باز شود و زمانی که Focus از روی آن برداشته شد بسته شود:

<button
    type="button"
    class="btn btn-primary"
    data-bs-toggle="popover"
    data-bs-trigger="focus"
    data-bs-title="راهنما"
    data-bs-content="اطلاعات تکمیلی این بخش در این قسمت نمایش داده می‌شود.">
    راهنما
</button>

Popover با JavaScript

می‌توان Popover را نیز با JavaScript مدیریت کرد:

const element =
    document.getElementById("myPopover");

const popover =
    bootstrap.Popover.getOrCreateInstance(element);

نمایش:

popover.show();

مخفی کردن:

popover.hide();

تغییر وضعیت:

popover.toggle();

و حذف:

popover.dispose();

رویدادهای Popover

Popover نیز Eventهای مختلفی دارد.

برای مثال:

const element =
    document.getElementById("myPopover");

element.addEventListener(
    "shown.bs.popover",
    function () {
        console.log("Popover opened");
    }
);

رویدادهای مهم:

• show.bs.popover

• shown.bs.popover

• hide.bs.popover

• hidden.bs.popover

• inserted.bs.popover

تفاوت Dropdown، Tooltip و Popover

این سه کامپوننت ممکن است در ابتدا شبیه یکدیگر به نظر برسند، اما کاربرد متفاوتی دارند.

برای مثال:

Dropdown

Actions
  ├── Edit
  ├── View
  └── Delete

Tooltip

Edit
  ↓
"Edit this user"

Popover

User Information

Name: Ali
Status: Active
Created: Today

ترکیب Dropdown و Tooltip و Popover

در یک پنل مدیریت واقعی می‌توان هر سه را هم‌زمان استفاده کرد.

فرض کنید جدول کاربران داریم.

هر ردیف می‌تواند شامل موارد زیر باشد:

• نام کاربر

• وضعیت

• دکمه اطلاعات

• دکمه عملیات

نمونه:

<div class="d-flex gap-2 align-items-center">

    <button
        type="button"
        class="btn btn-sm btn-outline-info"
        data-bs-toggle="popover"
        data-bs-title="اطلاعات کاربر"
        data-bs-content="کاربر فعال است و در تاریخ امروز ثبت شده است.">
        اطلاعات
    </button>

    <button
        type="button"
        class="btn btn-sm btn-outline-secondary"
        data-bs-toggle="tooltip"
        data-bs-title="نمایش جزئیات">
        👁
    </button>

    <div class="dropdown">

        <button
            class="btn btn-sm btn-primary dropdown-toggle"
            data-bs-toggle="dropdown">
            عملیات
        </button>

        <ul class="dropdown-menu">

            <li>
                <a class="dropdown-item" href="#">
                    ویرایش
                </a>
            </li>

            <li>
                <a class="dropdown-item" href="#">
                    مشاهده
                </a>
            </li>

            <li>
                <hr class="dropdown-divider">
            </li>

            <li>
                <a class="dropdown-item text-danger" href="#">
                    حذف
                </a>
            </li>

        </ul>

    </div>

</div>

فعال کردن Tooltip و Popover در یک صفحه

در انتهای صفحه و بعد از Bootstrap Bundle:

<script>
    const tooltipTriggers =
        document.querySelectorAll(
            '[data-bs-toggle="tooltip"]'
        );

    [...tooltipTriggers].forEach(element => {
        new bootstrap.Tooltip(element);
    });

    const popoverTriggers =
        document.querySelectorAll(
            '[data-bs-toggle="popover"]'
        );

    [...popoverTriggers].forEach(element => {
        new bootstrap.Popover(element);
    });
</script>

Bootstrap Bundle

برای استفاده از Dropdown، Tooltip و Popover باید JavaScript مربوط به Bootstrap در صفحه وجود داشته باشد.

در صورت استفاده از CDN:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>

استفاده از bundle مهم است زیرا وابستگی‌های لازم برای قابلیت‌های JavaScript Bootstrap را نیز در خود دارد.

یک صفحه کامل RTL

در ادامه یک نمونه کامل ایجاد می‌کنیم که هر سه کامپوننت را در یک صفحه فارسی استفاده می‌کند.

<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1">

    <title>
        Dropdown Tooltip Popover
    </title>

    <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.rtl.min.css"
        rel="stylesheet">

</head>

<body>

    <div class="container py-5">

        <div class="d-flex justify-content-between align-items-center mb-4">

            <div>
                <h1 class="h3 mb-1">
                    مدیریت کاربران
                </h1>

                <p class="text-secondary mb-0">
                    مدیریت و مشاهده اطلاعات کاربران
                </p>
            </div>

            <div class="dropdown">

                <button
                    class="btn btn-primary dropdown-toggle"
                    type="button"
                    data-bs-toggle="dropdown">

                    عملیات

                </button>

                <ul class="dropdown-menu">

                    <li>
                        <a class="dropdown-item" href="#">
                            افزودن کاربر
                        </a>
                    </li>

                    <li>
                        <a class="dropdown-item" href="#">
                            خروجی Excel
                        </a>
                    </li>

                    <li>
                        <hr class="dropdown-divider">
                    </li>

                    <li>
                        <a class="dropdown-item" href="#">
                            تنظیمات
                        </a>
                    </li>

                </ul>

            </div>

        </div>

        <div class="card shadow-sm">

            <div class="card-body">

                <div class="table-responsive">

                    <table class="table align-middle">

                        <thead>

                            <tr>

                                <th>
                                    نام
                                </th>

                                <th>
                                    وضعیت
                                </th>

                                <th>
                                    عملیات
                                </th>

                            </tr>

                        </thead>

                        <tbody>

                            <tr>

                                <td>
                                    علی رضایی
                                </td>

                                <td>
                                    <span class="badge text-bg-success">
                                        فعال
                                    </span>
                                </td>

                                <td>

                                    <div class="d-flex gap-2">

                                        <button
                                            type="button"
                                            class="btn btn-sm btn-outline-info"
                                            data-bs-toggle="popover"
                                            data-bs-trigger="focus"
                                            data-bs-title="اطلاعات کاربر"
                                            data-bs-content="این کاربر دارای حساب فعال است.">

                                            اطلاعات

                                        </button>

                                        <button
                                            type="button"
                                            class="btn btn-sm btn-outline-secondary"
                                            aria-label="مشاهده کاربر"
                                            data-bs-toggle="tooltip"
                                            data-bs-title="مشاهده جزئیات کاربر">

                                            👁

                                        </button>

                                        <div class="dropdown">

                                            <button
                                                type="button"
                                                class="btn btn-sm btn-primary dropdown-toggle"
                                                data-bs-toggle="dropdown">

                                                عملیات

                                            </button>

                                            <ul class="dropdown-menu">

                                                <li>
                                                    <a
                                                        class="dropdown-item"
                                                        href="#">
                                                        مشاهده
                                                    </a>
                                                </li>

                                                <li>
                                                    <a
                                                        class="dropdown-item"
                                                        href="#">
                                                        ویرایش
                                                    </a>
                                                </li>

                                                <li>
                                                    <hr class="dropdown-divider">
                                                </li>

                                                <li>
                                                    <a
                                                        class="dropdown-item text-danger"
                                                        href="#">
                                                        حذف
                                                    </a>
                                                </li>

                                            </ul>

                                        </div>

                                    </div>

                                </td>

                            </tr>

                        </tbody>

                    </table>

                </div>

            </div>

        </div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>

    <script>

        const tooltipElements =
            document.querySelectorAll(
                '[data-bs-toggle="tooltip"]'
            );

        tooltipElements.forEach(element => {
            new bootstrap.Tooltip(element);
        });

        const popoverElements =
            document.querySelectorAll(
                '[data-bs-toggle="popover"]'
            );

        popoverElements.forEach(element => {
            new bootstrap.Popover(element);
        });

    </script>

</body>

</html>

نکات دسترس‌پذیری

در استفاده از این کامپوننت‌ها باید Accessibility را نیز در نظر بگیریم.

Tooltip نباید اطلاعات ضروری باشد

اگر یک اطلاعات برای انجام عملیات ضروری است، نباید فقط داخل Tooltip قرار بگیرد.

بهتر است اطلاعات مهم مستقیماً در صفحه نمایش داده شود.

برای آیکون‌ها نام قابل دسترس تعیین کنید

مثلاً:

<button
    aria-label="ویرایش کاربر"
    class="btn btn-outline-secondary">
    ✏️
</button>

از Tooltip برای محتوای زیاد استفاده نکنید

اگر توضیحات طولانی است، بهتر است از Popover یا یک بخش مستقل در صفحه استفاده شود.

از Tooltip برای عناصر تعاملی پیچیده استفاده نکنید

Tooltip بیشتر برای اطلاعات کوتاه و غیرتعاملی مناسب است.

مدیریت کامپوننت‌های ایجادشده به‌صورت Dynamic

در پروژه‌های واقعی ممکن است HTML توسط JavaScript یا یک Framework مانند Angular ایجاد شود.

اگر بعد از بارگذاری اولیه صفحه یک Tooltip جدید ایجاد شود، کد initialization اولیه الزاماً آن عنصر جدید را پوشش نمی‌دهد.

برای مثال:

const element = document.createElement("button");

element.setAttribute(
    "data-bs-toggle",
    "tooltip"
);

element.setAttribute(
    "data-bs-title",
    "اطلاعات جدید"
);

document.body.appendChild(element);

new bootstrap.Tooltip(element);

بنابراین هنگام ایجاد Dynamic Content باید initialization کامپوننت نیز مدیریت شود.

اشتباهات رایج

1. فراموش کردن Bootstrap JavaScript

اگر Bundle را اضافه نکرده باشیم، Dropdown، Tooltip و Popover به‌درستی کار نمی‌کنند.

2. فراموش کردن Initialization

Dropdown با data-bs-toggle می‌تواند مستقیماً کار کند، اما Tooltip و Popover معمولاً نیاز به initialization دارند.

3. استفاده بیش از حد از Tooltip

اگر برای تمام عناصر صفحه Tooltip قرار دهیم، تجربه کاربری شلوغ و آزاردهنده می‌شود.

4. قرار دادن اطلاعات مهم فقط در Tooltip

اطلاعات ضروری باید در خود رابط کاربری نیز قابل مشاهده باشد.

5. انتظار Dropdown تو در تو بدون کدنویسی

Nested Dropdown به‌صورت کامل توسط Bootstrap Core ارائه نشده و برای آن معمولاً به پیاده‌سازی اضافه نیاز داریم.

6. استفاده از Popover برای اطلاعات بسیار طولانی

Popover برای اطلاعات contextual و نسبتاً کوتاه مناسب است. برای محتوای طولانی بهتر است از Modal یا صفحه اختصاصی استفاده کنیم.

تمرین عملی

یک صفحه مدیریت محصولات ایجاد کنید.

صفحه باید شامل موارد زیر باشد:

1. عنوان «مدیریت محصولات»

2. یک دکمه Dropdown با گزینه‌های:

   • افزودن محصول

   • خروجی گرفتن

   • تنظیمات

3. یک جدول محصولات

4. برای هر محصول:

   • نام

   • قیمت

   • وضعیت

   • عملیات

5. برای دکمه مشاهده، Tooltip ایجاد کنید.

6. برای نمایش خلاصه اطلاعات محصول، Popover ایجاد کنید.

7. برای عملیات، Dropdown ایجاد کنید.

8. صفحه را RTL و Responsive طراحی کنید.

تمرین پیشرفته

یک پنل مدیریت کاربران طراحی کنید که در آن:

• Navbar دارای Dropdown باشد.

• جدول کاربران دارای Dropdown عملیات باشد.

• دکمه‌های آیکونی دارای Tooltip باشند.

• اطلاعات خلاصه هر کاربر با Popover نمایش داده شود.

• Tooltip و Popover با JavaScript فعال شوند.

• یکی از Dropdownها با JavaScript کنترل شود.

• هنگام باز شدن Dropdown یک Event ثبت شود.

• هنگام نمایش Popover یک Event ثبت شود.

• تمام صفحه در موبایل نیز به‌درستی نمایش داده شود.

جمع‌بندی

در این مقاله با سه کامپوننت مهم Bootstrap آشنا شدیم. Dropdown برای نمایش منوها و مجموعه‌ای از گزینه‌ها و عملیات استفاده می‌شود و می‌توان آن را در جهت‌ها و حالت‌های مختلف نمایش داد. Tooltip برای ارائه توضیحات کوتاه درباره عناصر رابط کاربری مناسب است و برای فعال شدن آن معمولاً باید JavaScript مربوط به Bootstrap را اجرا کنیم. Popover نیز مشابه Tooltip است اما امکان نمایش عنوان و محتوای بیشتر را فراهم می‌کند. همچنین با JavaScript API، Eventها، جهت نمایش، Triggerها، Accessibility و نحوه ترکیب این سه کامپوننت در یک پنل واقعی آشنا شدیم. در پروژه‌های واقعی باید به جای استفاده بیش از حد از این کامپوننت‌ها، بر اساس نوع اطلاعات تصمیم بگیریم که Dropdown، Tooltip یا Popover مناسب‌تر است.