Bootstrap 4 Tutorial

Bootstrap 4 JS 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">
<h2 class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8">Bootstrap 4 JavaScript Popover</h2>
</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="e48c7119-a015-4a6b-997c-fb37ac188197" data-message-model-slug="gpt-4o">
<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">
<p>The Bootstrap 4 Popover component is a tooltip-like overlay that can display additional information or actions when triggered by clicking or hovering over an element. It supports a title and a body for detailed content, making it ideal for contextual tips or small help messages.</p>
<hr />
<h3>1. Basic Popover Example</h3>
<p>Here&rsquo;s how to set up a popover:</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;!-- Button to Trigger Popover --&gt;
&lt;button type="button" class="btn btn-secondary" data-toggle="popover" data-content="This is the popover content." data-placement="top"&gt;
  Hover to see Popover
&lt;/button&gt;

&lt;script&gt;
  $(document).ready(function(){
    $('[data-toggle="popover"]').popover(); // Initialize popover on page load
  });
&lt;/script&gt;
</code></pre>
</div>
</div>
</div>
</div>
<ul>
<li><strong>Explanation</strong>:
<ul>
<li><code>data-toggle="popover"</code>: Activates the popover functionality.</li>
<li><code>data-content="..."</code>: Defines the main content of the popover.</li>
<li><code>data-placement="top"</code>: Positions the popover above the button (options: <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>).</li>
</ul>
</li>
</ul>
<hr />
<h3>2. Popover with Title and Custom Placement</h3>
<p>You can add a title and change the popover position.</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;!-- Button with Title and Bottom Placement --&gt;
&lt;button type="button" class="btn btn-primary" data-toggle="popover" data-placement="bottom" title="Popover Title" data-content="This is a popover with a title and positioned at the bottom."&gt;
  Click to see Popover with Title
&lt;/button&gt;

&lt;script&gt;
  $(document).ready(function(){
    $('[data-toggle="popover"]').popover();
  });
&lt;/script&gt;
</code></pre>
</div>
</div>
</div>
</div>
<ul>
<li><strong>Explanation</strong>:
<ul>
<li><code>title="Popover Title"</code>: Adds a title to the popover.</li>
<li><code>data-placement="bottom"</code>: Positions the popover at the bottom.</li>
</ul>
</li>
</ul>
<hr />
<h3>3. Triggering Popover with JavaScript</h3>
<p>Bootstrap allows you to control popovers programmatically using JavaScript functions such as <code>.popover('show')</code>, <code>.popover('hide')</code>, and <code>.popover('toggle')</code>.</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;!-- Button to Control Popover via JavaScript --&gt;
&lt;button id="jsPopoverBtn" class="btn btn-success"&gt;Toggle Popover with JavaScript&lt;/button&gt;

&lt;script&gt;
  $(document).ready(function(){
    $('#jsPopoverBtn').popover({
      content: "This popover is controlled by JavaScript.",
      title: "JavaScript Controlled Popover",
      trigger: "manual" // Allows manual control of popover
    });
  });

$('#jsPopoverBtn').on('click', function () {
    $(this).popover('toggle'); // Toggle popover on button click
  });
&lt;/script&gt;
</code></pre>
</div>
</div>
</div>
</div>
<ul>
<li><strong>Explanation</strong>:
<ul>
<li><code>trigger: "manual"</code>: Disables automatic trigger, allowing manual control.</li>
<li><code>.popover('toggle')</code>: Toggles the visibility of the popover.</li>
</ul>
</li>
</ul>
<hr />
<h3>4. Dismissing Popovers Outside Click</h3>
<p>By default, popovers don&rsquo;t close when you click outside them. You can add custom code to dismiss the popover when clicking outside.</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;!-- Button with Popover --&gt;
&lt;button id="outsidePopover" class="btn btn-warning" data-toggle="popover" title="Outside Click Dismiss" data-content="Click anywhere outside to dismiss this popover."&gt;
  Click and then outside to dismiss
&lt;/button&gt;

&lt;script&gt;
  $(document).ready(function(){
    $('#outsidePopover').popover();
    $('body').on('click', function (e) {
      if (!$(e.target).closest('#outsidePopover').length) {
        $('#outsidePopover').popover('hide'); // Hide popover on outside click
      }
    });
  });
&lt;/script&gt;
</code></pre>
</div>
</div>
</div>
</div>
<ul>
<li><strong>Explanation</strong>:
<ul>
<li><code>$('body').on('click', ...)</code>: Listens for clicks outside the popover button and closes it when clicked outside.</li>
</ul>
</li>
</ul>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More