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

0 دیدگاه

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

شما می‌توانید در یک popover انواع محتوای دلخواه مانند متن، تصویر، لینک یا دکمه قرار دهید. کاربرد popover ها به نوع صفحه و هدف طراحی شما بستگی دارد. برای سهولت کار، بوت استرپ کامپوننت‌های آماده‌ای برای پیاده سازی popover ها ارائه می‌کند که می‌توانید آن‌ها را به راحتی در پروژه‌های تحت وب استفاده کنید.

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

در هنگام کار با افزونه popover در بوت استرپ رعایت چند نکته ضروری است:

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

فعال سازی Popover در بوت استرپ

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

  const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
  const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

1 2	const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]') const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

ایجاد یک Popover

ایجاد popover در بوت استرپ بسیار ساده است. کافی است ویژگی data-bs-toggle="popover" را به عنصر دلخواه اضافه کنید.

همچنین می‌توانید با استفاده از ویژگی‌های زیر، محتوای popover را تنظیم کنید:

data-bs-toggle: این ویژگی مشخص می‌کند که عنصر مربوطه دارای popover است.
title: با این ویژگی عنوان popover را تعیین می‌کنید.
data-content: این ویژگی مشخص می‌کند که چه محتوایی در popover نمایش داده شود.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Popover</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>
    <h4>Bootstrap creation</h4><br><br>
    <button type="button" class="btn btn-primary"
      data-bs-toggle="popover" data-bs-placement="top"
      data-bs-title="Popover"
      data-bs-content="It is a new popover.">
      Click to view popover
    </button>
    <script>
      const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
      const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Popover</title>

</head>

<body>

<h4>Bootstrap creation</h4><br><br>

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

data-bs-toggle="popover" data-bs-placement="top"

data-bs-title="Popover"

data-bs-content="It is a new popover.">

Click to view popover

</button>

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

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

</script>

</body>

</html>

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

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

موقعیت دهی به Popover در بوت استرپ

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

به طور پیش فرض، popover در سمت راست عنصر نمایش داده می‌شود. برای تغییر موقعیت نمایش popover، می‌توانید از ویژگی data-bs-placement استفاده کنید.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Popovers</title>
    <meta charset="UTF-8">
    <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>
    <h4>Positioning of Popover</h4>
    <br><br><br>
    <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
      Popover on top
    </button>
    <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
      Popover on right
    </button>
    <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
      Popover on bottom
    </button>
    <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
      Popover on left
    </button>
    <script>
      const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
      const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Popovers</title>

</head>

<body>

<h4>Positioning of Popover</h4>

Popover on top

</button>

Popover on right

</button>

Popover on bottom

</button>

Popover on left

</button>

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

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

</script>

</body>

</html>

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

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

سفارشی سازی ظاهر Popover

شما می‌توانید ظاهر popover ها را به راحتی سفارشی سازی کنید. برای این کار کافی است یک کلاس سفارشی تعریف کنید و آن را از طریق ویژگی data-bs-custom-class="custom-popover" به popover اعمال کنید.

در بسیاری از منابع و دوره های آموزش بوت استرپ، نحوه سفارشی سازی popover ها به عنوان یکی از مباحث کاربردی در طراحی رابط کاربری آموزش داده می‌شود.

<!DOCTYPE html>
<html lang="en">
  <head&>
    <title>Bootstrap - Popovers</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 Popover</h4><br><br>
    <!-- Define custom container -->
    <button type="button" class="btn btn-primary"
        data-bs-toggle="popover" data-bs-placement="top"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="It is a custom popover.">
      Custom popover
    </button>
    <script>
      const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
      const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
    </script>
  </body>
</html>

<!DOCTYPE html>

<head&>

<title>Bootstrap - Popovers</title>

</head>

<body>

<h4>Custom Popover</h4><br><br>

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

data-bs-toggle="popover" data-bs-placement="top"

data-bs-custom-class="custom-popover"

data-bs-title="Custom popover"

data-bs-content="It is a custom popover.">

Custom popover

</button>

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

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

</script>

</body>

</html>

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

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

بستن Popover در بوت استرپ

در حالت پیش فرض، اگر کاربر برای بار دوم روی همان عنصر کلیک کند، popover بسته می‌شود. با این حال، می‌توانید با استفاده از ویژگی data-bs-trigger="focus" کاری کنید که popover با کلیک روی بخش دیگری از صفحه بسته شود. در این حالت، کاربر با یک کلیک ساده در خارج از عنصر، popover را می‌بندد.

برای اینکه این رفتار در تمام مرورگرها و پلتفرم‌ها یکسان عمل کند، باید از یک ساختار HTML مناسب استفاده کنید. با رعایت این نکته، شما تجربه کاربری بهتری فراهم می‌کنید و از بروز مشکلات احتمالی جلوگیری می‌شود.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Dismissible Popover</title>
    <meta charset="UTF-8">
    <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>
      <div class="container mt-3">
      <h4>Dismissed on next click - Popover</h4><br>
      <a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Click anywhere in the document to close this popover">Click me</a>
      </div>
      <script>
       const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
       const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
      </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Dismissible Popover</title>

</head>

<body>

<h4>Dismissed on next click - Popover</h4><br>

<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Click anywhere in the document to close this popover">Click me</a>

</div>

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

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

</script>

</body>

</html>

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

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

نمایش Popover با Hover ماوس

گاهی اوقات ممکن است بخواهید Popover با قرار گرفتن نشانگر ماوس روی یک عنصر نمایش داده شود. برای این منظور، کافی است از ویژگی data-bs-trigger="hover" استفاده کنید. به این ترتیب، زمانی که کاربر نشانگر ماوس را روی عنصر مورد نظر می‌برد، Popover به صورت خودکار ظاهر می‌شود. این روش برای ارائه توضیحات تکمیلی یا نمایش راهنمایی‌های سریع کاربرد زیادی دارد.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Popover on hover</title>
    <meta charset="UTF-8">
    <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>
      <div class="container mt-3">
      <h4>Hoverable Popover</h4><br>
      <a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Popover text">Hover over me</a>
      </div>
      <script>
       const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
       const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
      </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Popover on hover</title>

</head>

<body>

<h4>Hoverable Popover</h4><br>

<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Popover text">Hover over me</a>

</div>

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

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

</script>

</body>

</html>

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

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

استفاده از Popover روی عناصر غیرفعال

زمانی که می‌خواهید روی یک عنصر غیرفعال (disabled) popover قرار دهید، بهتر است از ویژگی data-bs-trigger="hover focus" استفاده کنید. به این ترتیب، تجربه کاربری بهبود می‌یابد و تعامل با عناصر غیرفعال نیز واضح‌تر می‌شود.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Popovers</title>
    <meta charset="UTF-8">
    <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>Popover on Disabled Element</h4><br>
    <span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
      <button class="btn btn-primary" type="button" disabled>Disabled button</button>
    </span>
    <script>
      const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
      const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Popovers</title>

</head>

<body>

<h4>Popover on Disabled Element</h4><br>

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

</span>

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

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

</script>

</body>

</html>

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

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

تنظیم گزینه های popover در بوت استرپ

شما می‌توانید گزینه های مختلف را از طریق ویژگی‌های HTML به popover اضافه کنید. برای این کار کافی است نام گزینه را به کلاس data-bs- اضافه کنید و آن را به عنوان یک ویژگی به عنصر مورد نظر بدهید. به عنوان مثال:
data-bs-boundary="{value}"
همچنین هنگام استفاده از گزینه ها به این روش، باید به قالب نوشتار (case type) توجه داشته باشید. در صورتی که از ویژگی‌های داده‌ای (data attributes) استفاده می‌کنید، باید نام گزینه را به صورت “kebab-case” بنویسید (یعنی با خط تیره). برای نمونه: به جای data-bs-fallbackPlacements="[array]" باید از data-bs-fallback-placements="[array]" استفاده کنید. رعایت این نکته باعث می‌شود تنظیمات popover به درستی اعمال شوند و از بروز خطا جلوگیری گردد.

<!DOCTYPE html>
<html lang="en">
  <head&>
      <title>Bootstrap Popovers - 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>Popover options</h4><br>
      <button type="button" class="btn btn-lg btn-success" data-bs-toggle="popover"  data-bs-title ="Title added through options and that overrides the title provided" title="Popover description" data-content="Popover desc">Click Me to view</button>
      <br><br>
      <script>
      const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
      const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
    </script>
  </body>
</html>

<!DOCTYPE html>

<head&>

<title>Bootstrap Popovers - Options</title>

</head>

<body>

<h4>Popover options</h4><br>

<button type="button" class="btn btn-lg btn-success" data-bs-toggle="popover" data-bs-title ="Title added through options and that overrides the title provided" title="Popover description" data-content="Popover desc">Click Me to view</button>

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

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

</script>

</body>

</html>

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

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

جدول گزینه های قابل تنظیم در Popover

در جدول زیر، می‌توانید با گزینه های مختلفی که بوت استرپ برای تنظیم popover ها ارائه می‌دهد آشنا شوید. برای استفاده از این گزینه ها، کافی است آن‌ها را به صورت ویژگی های داده ای (data attributes) با پیشوند .data-bs- به عنصر مورد نظر اضافه کنید.

نام (Name)	نوع (Type)	مقدار پیش فرض (Default)	توضیحات (Description)
allowList	object	مقدار پیش فرض	شیء (Object) شامل تگ‌ها و ویژگی‌های مجاز.
animation	boolean	true	یک انتقال fade (محو شدن) به صورت CSS روی popover اعمال می‌شود.
boundary	string, element	‘clippingParents’	به صورت پیش فرض ‘clippingParents’ است و می‌تواند ارجاع به یک عنصر HTML نیز دریافت کند (فقط از طریق جاوا اسکریپت).
container	string, element, false	false	تعیین می‌کند که popover در کدام عنصر خاص اضافه شود.
customClass	string, function	”	کلاس‌های دلخواه را می‌توانید به popover اضافه کنید. برای افزودن چند کلاس، آن‌ها را با فاصله جدا کنید، مثال: `'class-1 class-2'`.
delay	number, object	0	تعیین تاخیر در نمایش یا مخفی شدن popover (بر حسب میلی ثانیه). ساختار شیء به صورت: `delay: { "show": 500, "hide": 100 }`.
fallbackPlacements	array	[‘top’, ‘right’, ‘bottom’, ‘left’]	برای جایگاه‌های جایگزین (fallback) یک لیست از موقعیت‌ها به صورت آرایه تعریف می‌شود.
html	boolean	false	مشخص می‌کند که محتوای HTML در popover مجاز باشد یا خیر.
offset	array, string, function	[0, 0]	فاصله popover نسبت به عنصر هدف. مثال: `data-bs-offset="10,20"`.
placement	string, function	‘top’	موقعیت نمایش popover را مشخص می‌کند.
popperConfig	null, object, function	null	برای تغییر تنظیمات پیش فرض Popper می‌توانید از این گزینه استفاده کنید.
sanitize	boolean	true	فعال یا غیرفعال کردن فرآیند sanitization (پاکسازی کدهای ناامن).
sanitizeFn	null, function	null	امکان ارائه یک تابع sanitization دلخواه.
selector	string, false	false	با استفاده از یک selector، popover به عناصر هدف مشخص شده ارجاع داده می‌شود.
template	string	`<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>`	قالب پایه (Base HTML) برای ساخت popover.
title	string, element, function	”	عنوان popover را مشخص می‌کند.
trigger	string	‘hover focus’	تعیین می‌کند که popover چگونه فعال شود: click (کلیک)، hover (حرکت ماوس)، focus (دریافت فوکوس)، manual (به صورت دستی).

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

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

نظرات

دوره آموزش طراحی فروشگاه اینترنتی بدون کد نویسی در 8 ساعت

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

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

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

فعال سازی Popover در بوت استرپ

ایجاد یک Popover

موقعیت دهی به Popover در بوت استرپ

سفارشی سازی ظاهر Popover

بستن Popover در بوت استرپ

نمایش Popover با Hover ماوس

استفاده از Popover روی عناصر غیرفعال

تنظیم گزینه های popover در بوت استرپ

جدول گزینه های قابل تنظیم در Popover

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

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

نظرات

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

لغو پاسخ

مطالب مرتبط