آموزش Tooltip در بوت استرپ

0 دیدگاه

در این بخش یاد می‌گیرید چطور Tooltip در بوت استرپ را به صفحه اضافه کنید. تولتیپ یک جعبه کوچک و شناور است که وقتی کاربر روی یک عنصر مثل دکمه، آیکون یا لینک کلیک می‌کند یا ماوس را روی آن نگه می‌دارد، ظاهر می‌شود.

طراحان از تولتیپ برای توضیح بیشتر، راهنمایی یا ارائه اطلاعات درباره عملکرد یا هدف یک عنصر در رابط کاربری استفاده می‌کنند.

نکات مهم هنگام استفاده از افزونه Tooltips

از آنجا که Tooltips برای تعیین موقعیت، به کتابخانه جانبی Popper وابسته هستند، لازم است فایل popper.min.js را پیش از bootstrap.js در صفحه قرار دهید. یا می‌توانید به جای آن از فایل‌های ترکیبی bootstrap.bundle.min.js یا bootstrap.bundle.js استفاده کنید که Popper را در خود دارند.
باید ابتدا Tooltips را مقداردهی اولیه (initialize) کنید. بوت استرپ برای بهینه‌سازی عملکرد، تولتیپ را به صورت پیش‌فرض غیرفعال نگه می‌دارد.
اگر مقدار ویژگی title در یک عنصر صفر باشد (یعنی رشته‌ای خالی داشته باشد)، تولتیپ نمایش داده نمی‌شود.
Tooltips روی عناصری که مخفی هستند اجرا نمی‌شود.
برای عناصر دارای کلاس .disabled یا ویژگی disabled، نمی‌توانید تولتیپ را مستقیم فعال کنید. به جای آن، عنصر را داخل یک عنصر والد قرار بدهید و تولتیپ را روی آن والد تعریف کنید.
برای اینکه Tooltips در مرکز عنصر قرار نگیرد، ویژگی white-space: nowrap; را روی تگ <a> یا عنصر مورد نظر اعمال کنید.
قبل از اینکه هر عنصری را از DOM حذف کنید، باید Tooltips مرتبط با آن را مخفی کنید. در غیر این صورت ممکن است اختلال‌های ظاهری یا عملکردی در صفحه ایجاد شود.
در محیط Shadow DOM هم می‌توانید تولتیپ را فعال کنید، به شرطی که از عنصر واسطه استفاده کنید.

نحوه فعال‌سازی Tooltips در بوت استرپ

برای فعال‌سازی تولتیپ در کل صفحه، باید تمام عناصر دارای ویژگی data-bs-toggle را مقداردهی اولیه کنید.

  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
  const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

1 2	const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]') const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

ساخت تولتیپ در بوت استرپ

برای ایجاد یک Tooltip در بوت استرپ، کافی است ویژگی data-bs-toggle="tooltip" را به عنصر مورد نظر اضافه کنید. این ویژگی به بوت استرپ اعلام می‌کند که عنصر باید دارای Tooltip باشد. محتوای داخل Tooltip نیز با ویژگی title تعیین می‌شود. اگر با این ساختارها آشنا نیستید، پیشنهاد می‌کنیم ابتدا سری به صفحه آموزش بوت استرپ بزنید و با اصول اولیه آن آشنا شوید.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltips</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
      <h4>Bootstrap tooltip creation</h4>
      <button type="button" class="btn btn-lg btn-success" data-bs-toggle="tooltip" title="Tooltip description" data-content="Tooltip desc">View tooltip</button>
      
      <script>
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
      </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Tooltips</title>

</head>

<body>

<h4>Bootstrap tooltip creation</h4>

<button type="button" class="btn btn-lg btn-success" data-bs-toggle="tooltip" title="Tooltip description" data-content="Tooltip desc">View tooltip</button>

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

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

</script>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

Tooltip روی لینک‌ ها در بوت استرپ

می‌توانید برای لینک‌ ها نیز از Tooltip استفاده کنید. فقط کافی است ویژگی data-bs-toggle را به عنصر لینک اضافه کنید.

در ادامه یک مثال ساده از نحوه استفاده را مشاهده می‌کنید:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltip</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Tooltip on link</h4>
    <p class="muted">The  <a href="#" data-bs-toggle="tooltip" data-bs-title="Sample Tooltip">tooltip</a> is used for displaying some extra information about any content. This can be added to a <a href="#" data-bs-toggle="tooltip" data-bs-title="Second tooltip">link</a>.</p>
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Tooltip</title>

</head>

<body>

<h4>Tooltip on link</h4>

<p class="muted">The <a href="#" data-bs-toggle="tooltip" data-bs-title="Sample Tooltip">tooltip</a> is used for displaying some extra information about any content. This can be added to a <a href="#" data-bs-toggle="tooltip" data-bs-title="Second tooltip">link</a>.</p>

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

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

</script>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

می‌توانید در کد HTML خود از هرکدام از ویژگی‌های title یا data-bs-title استفاده کنید. وقتی از title استفاده می‌کنید، بوت استرپ (با کمک Popper) هنگام رندر کردن عنصر، آن را به‌صورت خودکار به data-bs-title تبدیل می‌کند.

Tooltip سفارشی در بوت استرپ

بوت استرپ این امکان را فراهم کرده است که با استفاده از کلاس سفارشی data-bs-custom-class="custom-tooltip"، ظاهر Tooltip را مطابق نیاز خود تغییر دهید.

در ادامه یک مثال از نحوه استفاده از این قابلیت را می‌بینید:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltip</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Custom Tooltip</h4>
    <button type="button" class="btn btn-primary"
          data-bs-toggle="tooltip" data-bs-placement="right"
          data-bs-custom-class="custom-tooltip"
          data-bs-title="Tooltip is created as custom tooltip.">
          Custom tooltip
  </button>
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Tooltip</title>

</head>

<body>

<h4>Custom Tooltip</h4>

<button type="button" class="btn btn-primary"

data-bs-toggle="tooltip" data-bs-placement="right"

data-bs-custom-class="custom-tooltip"

data-bs-title="Tooltip is created as custom tooltip.">

Custom tooltip

</button>

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

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

</script>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

تعیین موقعیت Tooltip

برای تعیین موقعیت نمایش Tooltip، چهار گزینه در اختیار دارید: بالا (top)، پایین (bottom)، چپ (left) و راست (right).

به‌صورت پیش‌فرض، Tooltip در بالای عنصر نمایش داده می‌شود.

برای تغییر موقعیت، می‌توانید از ویژگی data-bs-placement استفاده کنید و مقدار دلخواه را به آن اختصاص دهید.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap - Tooltip</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example tooltip-demo">
    <h4>Tooltip example - Position</h4>
    <button type="button"   class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top"    data-bs-title="Top Tooltip">
    Top Tooltip
    </button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right"  data-bs-title="Right Tooltip">
    Right Tooltip
    </button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Bottom Tooltip">
    Bottom Tooltip
    </button>
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left"   data-bs-title="Left Tooltip">
    Left Tooltip
    </button>
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Tooltip</title>

</head>

<h4>Tooltip example - Position</h4>

Top Tooltip

</button>

Right Tooltip

</button>

Bottom Tooltip

</button>

Left Tooltip

</button>

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

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

</script>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

Tooltip با محتوای HTML سفارشی

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltips</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Bootstrap tooltip creation with HTML</h4>
    
    <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
      Tooltip with HTML
    </button>
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Tooltips</title>

</head>

<body>

<h4>Bootstrap tooltip creation with HTML</h4>

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">

Tooltip with HTML

</button>

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

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

</script>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

Markup

برای ایجاد یک Tooltip روی هر عنصر HTML، فقط کافی است از یک ویژگی داده‌ای (data attribute) و ویژگی title استفاده کنید.

بوت استرپ هنگام اجرای Tooltip، یک ساختار ساده HTML تولید می‌کند که به‌صورت پیش‌فرض موقعیت آن در بالا (top) عنصر قرار می‌گیرد.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltips</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Bootstrap tooltip markup</h4>
    
    <!-- HTML to write -->
    <a href="#" data-bs-toggle="tooltip" title="Markup for a tooltip!">Hover over me for markup</a>
    <!-- Generated markup by the plugin -->
    <div class="tooltip bs-tooltip-top" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">
        Markup for a tooltip
    </div>
    </div>
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Tooltips</title>

</head>

<body>

<h4>Bootstrap tooltip markup</h4>

<a href="#" data-bs-toggle="tooltip" title="Markup for a tooltip!">Hover over me for markup</a>

Markup for a tooltip

</div>

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

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

</script>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

Tooltip روی عناصر غیرفعال (disabled)

کاربران نمی‌توانند روی عناصری که دارای ویژگی disabled هستند کلیک کنند، ماوس را روی آن‌ها ببرند یا با صفحه کلید فوکوس کنند. به همین دلیل، نمی‌توان Tooltip را مستقیماً روی این نوع عناصر فعال کرد.

برای حل این مشکل، عنصر مورد نظر را داخل یک تگ واسط مانند <div> یا <span> قرار دهید و Tooltip را روی آن عنصر والد تعریف کنید.

همچنین برای اینکه کاربر بتواند با صفحه کلید روی این عنصر فوکوس کند، ویژگی tabindex="0" را به آن اضافه کنید.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltips</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Tooltip on Disabled Element</h4>
    <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Tooltip Disabled">
      <button class="btn btn-secondary" type="button" disabled>Button Disabled</button>
    </span>
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Tooltips</title>

</head>

<body>

<h4>Tooltip on Disabled Element</h4>

<button class="btn btn-secondary" type="button" disabled>Button Disabled</button>

</span>

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

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

</script>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

تنظیمات Tooltips در بوت استرپ

می‌توانید گزینه‌های مختلفی را با استفاده از ویژگی‌های داده ای (data attributes) به Tooltip اضافه کنید. برای این کار، نام گزینه را به پیشوند data-bs- اضافه کرده و مقدار آن را به‌صورت ویژگی HTML تنظیم کنید. به‌عنوان مثال: data-bs-boundary="{value}".

وقتی از ویژگی‌های داده ای برای تعیین تنظیمات استفاده می‌کنید، دقت کنید که نام گزینه‌ها باید به صورت “kebab-case” نوشته شوند، نه به صورت “camelCase”.

برای نمونه، به‌جای data-bs-fallbackPlacements="[array]" باید از این قالب استفاده کنید:
data-bs-fallback-placements="[array]".

در ادامه، یک نمونه کد را می‌بینید که در آن گزینه‌های مختلف به‌صورت ویژگی‌های داده‌ای (data attributes) به کلاس data-bs- اضافه شده‌اند:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Tooltips - Options</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h4>Tooltip options</h4>
    <button type="button" class="btn btn-lg btn-success" data-bs-toggle="tooltip"  data-bs-title ="Title added through options and that overrides the title provided" title="Tooltip description" data-content="Tooltip desc">View tooltip</button>
    
    <script>
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Tooltips - Options</title>

</head>

<body>

<h4>Tooltip options</h4>

<button type="button" class="btn btn-lg btn-success" data-bs-toggle="tooltip" data-bs-title ="Title added through options and that overrides the title provided" title="Tooltip description" data-content="Tooltip desc">View tooltip</button>

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

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

</script>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

جدول گزینه های قابل استفاده برای Tooltip در بوت استرپ

در جدول زیر می‌توانید گزینه‌هایی را مشاهده کنید که بوت استرپ برای شخصی سازی Tooltip ارائه می‌دهد. این گزینه‌ها را می‌توانید با پیشوند data-bs- به عنوان ویژگی داده ای به عنصر HTML اضافه کنید:

نام گزینه (Name)	نوع (Type)	مقدار پیش‌فرض (Default)	توضیحات (Description)
`allowList`	object	مقدار پیش‌فرض	شامل تگ‌ها و ویژگی‌هایی است که در Tooltip مجاز هستند.
`animation`	boolean	`true`	تعیین می‌کند که انیمیشن CSS (محو شدن) برای Tooltip اعمال شود یا نه.
`boundary`	string, element	`'clippingParents'`	محدوده‌ای که Tooltip می‌تواند در آن نمایش یابد. می‌توان از عنصر HTML نیز استفاده کرد (فقط از طریق JavaScript).
`container`	string, element, false	`false`	مشخص می‌کند Tooltip به کدام عنصر ضمیمه شود.
`customClass`	string, function	`''`	کلاس‌های سفارشی که علاوه بر کلاس‌های پیش‌فرض در قالب Tooltip اضافه می‌شوند. برای افزودن چند کلاس از فاصله استفاده کنید.
`delay`	number, object	`0`	زمان تاخیر در نمایش یا پنهان کردن Tooltip به میلی‌ثانیه. ساختار شی: `{ "show": 500, "hide": 100 }`.
`fallbackPlacements`	array	`['top', 'right', 'bottom', 'left']`	موقعیت‌های جایگزین در صورت نبود فضای کافی در موقعیت اصلی.
`html`	boolean	`false`	اجازه استفاده از محتوای HTML درون Tooltip را می‌دهد.
`offset`	array, string, function	`[0, 0]`	فاصله Tooltip از عنصر هدف. مثال: `data-bs-offset="10,20"`
`placement`	string, function	`'top'`	موقعیت اصلی Tooltip نسبت به عنصر هدف.
`popperConfig`	null, object, function	`null`	امکان تنظیمات سفارشی برای Popper (موتور موقعیت‌دهی Tooltip).
`sanitize`	boolean	`true`	فعال یا غیرفعال کردن فرآیند ضدعفونی کردن محتوای HTML.
`sanitizeFn`	null, function	`null`	تابع دلخواه برای ضدعفونی کردن HTML.
`selector`	string, false	`false`	مشخص می‌کند Tooltip برای کدام عناصر اعمال شود، با استفاده از CSS Selector.
`template`	string	(قالب پیش‌فرض HTML)	ساختار پایه‌ای HTML برای ایجاد Tooltip.
`title`	string, element, function	`''`	متن یا محتوایی که به‌عنوان عنوان در Tooltip نمایش داده می‌شود.
`trigger`	string	`'hover focus'`	مشخص می‌کند چه رفتاری Tooltip را فعال کند: کلیک، هاور، فوکوس یا دستی.

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

پکیج جامع و پروژه محور ASP.NET MVC + طراحی فروشگاه اینترنتی فروش فایل

انتشار: ۲۲ خرداد ۱۴۰۴

آموزش Tooltip در بوت استرپ

نکات مهم هنگام استفاده از افزونه Tooltips

نحوه فعال‌سازی Tooltips در بوت استرپ

ساخت تولتیپ در بوت استرپ

Tooltip روی لینک‌ ها در بوت استرپ

Tooltip سفارشی در بوت استرپ

تعیین موقعیت Tooltip

Tooltip با محتوای HTML سفارشی

Markup

Tooltip روی عناصر غیرفعال (disabled)

تنظیمات Tooltips در بوت استرپ

جدول گزینه های قابل استفاده برای Tooltip در بوت استرپ

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط