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

✅ Popover ساده

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="عنوان Popover" data-bs-content="این یک متن نمونه است">
  کلیک کن
</button>

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

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

• title="..." → عنوان Popover

• data-bs-content="..." → محتوای Popover

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

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

✅ Popover با HTML

<button class="btn btn-warning" data-bs-toggle="popover" data-bs-html="true" title="HTML Popover" data-bs-content="<b>متن بولد</b> و <i>ایتالیک</i>">
  Popover HTML
</button>

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

✅ Popover با تریگرهای مختلف

• به صورت پیش‌فرض Popover با کلیک فعال می‌شود.

• می‌توان تریگر را تغییر داد:

var popover = new bootstrap.Popover(document.querySelector('#myPopover'), {
  trigger: 'hover focus' // با هاور و فوکوس فعال شود
});

✅ نکات مهم

• Popover نیازمند JS بوت‌استرپ است.

• می‌توان موقعیت (top, bottom, left, right) و تریگر آن را شخصی‌سازی کرد.

• برخلاف Tooltip، Popover می‌تواند محتوای طولانی‌تر و HTML داشته باشد.