Bootstrap 3 Tutorial

Bootstrap 3 Popover

Last modified on: October 28, 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="4fae9920-5ece-492d-b77d-32a620f223b6" 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 3 Popover</h3>
<p>Bootstrap 3 Popovers are similar to tooltips but provide a larger container for content. They can contain more complex information and can be triggered by clicks, hovers, or focus. Popovers can include HTML content and allow for additional customization, making them great for displaying supplementary information.</p>
<hr />
<h3>1. Basic Structure</h3>
<p>To create a popover, you will use the <code>data-toggle="popover"</code> attribute on the element. You can specify the content of the popover using the <code>data-content</code> attribute.</p>
<h4>Example of a Basic Popover</h4>
<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;!-- Include Bootstrap CSS --&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;

&lt;!-- Popover Element --&gt;
&lt;button type="button" class="btn btn-default" data-toggle="popover" title="Popover Title" data-content="This is the content of the popover."&gt;
    Click to toggle popover
&lt;/button&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>2. Adding Popover Functionality</h3>
<p>Just like tooltips, to activate popovers, you need to include jQuery and Bootstrap's JavaScript. You'll also need to initialize the popover using JavaScript.</p>
<h4>Example of Including Dependencies and Initializing Popover</h4>
<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;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
&lt;script src="https://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
&lt;!-- Include Bootstrap JS --&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;

&lt;script&gt;
$(document).ready(function(){
    // Initialize popovers
    $('[data-toggle="popover"]').popover(); 
});
&lt;/script&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>3. Customizing the Popover</h3>
<p>You can customize the appearance and behavior of the popover using various options, such as placement and triggers.</p>
<h4>Example of Custom Popover Placement</h4>
<p>You can specify the position of the popover relative to the element using the <code>data-placement</code> attribute, with options such as <code>top</code>, <code>bottom</code>, <code>left</code>, and <code>right</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 type="button" class="btn btn-default" data-toggle="popover" title="Popover on the right" data-content="Content goes here" data-placement="right"&gt;
    Popover on right
&lt;/button&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>4. Popover with HTML Content</h3>
<p>You can include HTML content in a popover by setting the <code>data-html</code> attribute to <code>true</code>. This allows you to add formatting like bold or links within the popover.</p>
<h4>Example of HTML Popover</h4>
<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 type="button" class="btn btn-default" data-toggle="popover" data-html="true" title="HTML Popover" data-content="&lt;strong&gt;This is bold!&lt;/strong&gt; &lt;a href='#'&gt;Link&lt;/a&gt;"&gt;
    Popover with HTML
&lt;/button&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>5. Triggering Popovers</h3>
<p>You can control when the popover appears using the <code>data-trigger</code> attribute. Options include <code>click</code>, <code>hover</code>, <code>focus</code>, and <code>manual</code>.</p>
<h4>Example of Click Trigger Popover</h4>
<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 type="button" class="btn btn-default" data-toggle="popover" title="Clicked Popover" data-content="This popover is triggered by clicking!" data-trigger="click"&gt;
    Click me for popover
&lt;/button&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>6. Dismissing Popovers</h3>
<p>To close a popover, you can use the <code>data-dismiss</code> attribute. You can also programmatically hide it using JavaScript.</p>
<h4>Example of Dismissable Popover</h4>
<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 type="button" class="btn btn-default" data-toggle="popover" title="Dismissable Popover" data-content="Click anywhere outside to dismiss."&gt;
    Dismissable popover
&lt;/button&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<h3>Conclusion</h3>
<p>Bootstrap 3 Popovers are a versatile tool for enhancing user interaction on your website. They provide a way to display additional content without cluttering the interface, and their customizable options make them suitable for various use cases. Whether you need simple text or rich HTML content, popovers can significantly improve user experience and engagement.</p>

Web Technology View More