📌 Tooltip یک متن کوچک راهنماست که وقتی موس روی یک عنصر می‌رود یا روی آن فوکوس می‌کنیم، ظاهر می‌شود.
این ابزار برای توضیح کوتاه عملکرد دکمه‌ها یا لینک‌ها کاربرد دارد.

✅ Tooltip ساده

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="این یک راهنمای کوتاه است">
  موس را روی من ببرید
</button>

<script>
  // فعال‌سازی Tooltip با جاوااسکریپت
  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
  const tooltipList = [...tooltipTriggerList].map(el => new bootstrap.Tooltip(el));
</script>

• data-bs-toggle="tooltip" → فعال‌سازی Tooltip

• data-bs-placement="top" → موقعیت Tooltip (top, bottom, left, right)

• title="..." → متن Tooltip

✅ موقعیت‌های مختلف Tooltip

<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="بالا">Top</button>
<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="راست">Right</button>
<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="پایین">Bottom</button>
<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="چپ">Left</button>

✅ Tooltip روی لینک

<a href="#" data-bs-toggle="tooltip" title="این یک لینک است">لینک با Tooltip</a>

✅ Tooltip با HTML

<button class="btn btn-warning" data-bs-toggle="tooltip" data-bs-html="true" title="<b>Bold</b> متن HTML">
  Tooltip با HTML
</button>

• data-bs-html="true" → اجازه استفاده از HTML در Tooltip

✅ نکات مهم

• Tooltip نیازمند JS بوت‌استرپ است، بدون آن کار نمی‌کند.

• Tooltip به صورت خودکار با فوکوس یا هاور فعال می‌شود.

• می‌توان از جاوااسکریپت برای دینامیک کردن Tooltip هم استفاده کرد:

var tooltip = new bootstrap.Tooltip(document.querySelector('#myTooltip'), {
  title: 'متن جدید Tooltip',
  placement: 'bottom'
});