Bootstrap 5 Tutorial

Bootstrap 5 Popover

Last modified on: October 27, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="80108360-938e-48eb-a17e-dd1077b33941" data-message-model-slug="gpt-4o-mini">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>Bootstrap 5: Popover</h3>
<p>Popovers in Bootstrap 5 are similar to tooltips but provide more extensive information, including titles and HTML content. They are useful for displaying additional details when a user interacts with an element, such as buttons or links, without navigating away from the current page.</p>
<hr />
<h3>Key Features of Bootstrap 5 Popover</h3>
<ol>
<li><strong>Content Flexibility</strong>: Popovers can contain rich HTML content, making them suitable for displaying more complex information, including forms and images.</li>
<li><strong>Customizable Positioning</strong>: You can specify the positioning of the popover relative to the target element.</li>
<li><strong>JavaScript Control</strong>: Popovers can be dynamically controlled with JavaScript for advanced interactions.</li>
<li><strong>Accessibility</strong>: Designed to be accessible, supporting keyboard navigation and screen readers.</li>
<li><strong>Easy Integration</strong>: Seamlessly integrates with Bootstrap&rsquo;s grid and utility classes for styling.</li>
</ol>
<hr />
<h3>Example: Creating a Popover in Bootstrap 5</h3>
<p>Here&rsquo;s an example demonstrating how to implement a popover using Bootstrap 5:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Bootstrap 5 Popover Example&lt;/title&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;!-- Popover trigger --&gt;
    &lt;button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="This is the content of the popover. You can include any HTML content you like here."&gt;
        Click me to toggle popover
    &lt;/button&gt;

&lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        // Initialize all popovers
        var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
            return new bootstrap.Popover(popoverTriggerEl);
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Explanation of the Code</h3>
<ul>
<li><strong>Popover Trigger</strong>: The button has the <code>data-bs-toggle="popover"</code> attribute, which indicates that it will trigger a popover. The <code>title</code> attribute sets the popover's title, and <code>data-bs-content</code> holds the main content to be displayed inside the popover.</li>
<li><strong>JavaScript Initialization</strong>: The script initializes popovers for all elements with the <code>data-bs-toggle="popover"</code> attribute. This initialization must be performed after including the Bootstrap JavaScript library to ensure functionality.</li>
</ul>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More