flowbite-mcp 1.0.0

package/data/components/popover.md

@@ -0,0 +1,826 @@
+---
+layout: docs
+title: Tailwind CSS Popover - Flowbite
+description: Use the popover component to show detailed information inside a pop-up box relative to the element that is being clicked or hovered based on multiple styles
+group: components
+toc: true
+requires_js: true
+
+previous: Pagination
+previousLink: components/pagination/
+
+next: Progress bar
+nextLink: components/progress/
+---
+
+Get started with the popover component to show any type of content inside a pop-up box when hovering or clicking over a trigger element. There are multiple examples that you can choose from, such as showing more information about a user profile, company profile, password strength, and more.
+
+Make sure that you have the Flowbite JavaScript included in your project to enable the popover interactivity by following the <a href="{{< ref "getting-started/quickstart" >}}">quickstart guide</a>.
+
+## Default popover
+
+Initialize a new popover by adding the `data-popover-target="{elementId}"` data attribute to the trigger element where `elementId` is the id of the popover component.
+
+{{< example class="flex justify-center pt-32" github="components/popover.md" show_dark=true >}}
+<button data-popover-target="popover-default" type="button" class="text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Default popover</button>
+
+<div data-popover id="popover-default" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm text-body transition-opacity duration-300 bg-neutral-primary-soft border border-default rounded-base shadow-xs opacity-0">
+    <div class="px-3 py-2 bg-neutral-tertiary border-b border-default rounded-t-base">
+        <h3 class="font-medium text-heading">Popover title</h3>
+    </div>
+    <div class="px-3 py-2">
+        <p>And here's some amazing content. It's very engaging. Right?</p>
+    </div>
+    <div data-popper-arrow></div>
+</div>
+{{< /example >}}
+
+## User profile
+
+Use this example to show more information about a user profile when hovering over the trigger component.
+
+{{< example class="flex justify-center pt-60" github="components/popover.md" show_dark=true >}}
+<button data-popover-target="popover-user-profile" type="button" class="text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">User profile</button>
+
+<div data-popover id="popover-user-profile" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm text-body transition-opacity duration-300 bg-neutral-primary-soft border border-default rounded-base shadow-xs opacity-0">
+    <div class="p-3">
+        <div class="flex items-center justify-between mb-2">
+            <a href="#">
+                <img class="w-8 h-8 rounded-full" src="/docs/images/people/profile-picture-1.jpg" alt="Jese Leos">
+            </a>
+            <div>
+                <button type="button" class="text-white bg-brand hover:bg-brand-strong box-border border border-transparent focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded text-xs px-3 py-1.5 focus:outline-none">Follow</button>
+            </div>
+        </div>
+        <p class="text-sm font-semibold text-heading">
+            <a href="#">Jese Leos</a>
+        </p>
+        <p class="mb-3 text-sm font-normal text-body">
+            <a href="#" class="hover:underline">@jeseleos</a>
+        </p>
+        <p class="mb-4 text-sm">Open-source contributor & CEO. Building <a href="#" class="text-fg-brand hover:underline">flowbite.com</a>.</p>
+        <ul class="flex text-sm">
+            <li class="me-2.5">
+                <a href="#" class="hover:underline">
+                    <span class="font-medium text-heading">799</span>
+                    <span>Following</span>
+                </a>
+            </li>
+            <li>
+                <a href="#" class="hover:underline">
+                    <span class="font-medium text-heading">3,758</span>
+                    <span>Followers</span>
+                </a>
+            </li>
+        </ul>
+    </div>
+    <div data-popper-arrow></div>
+</div>
+{{< /example >}}
+
+## Company profile
+
+This example can be used to show more information about a company profile.
+
+{{< example class="flex justify-center pt-80" github="components/popover.md" disable_init_js=true show_dark=true >}}
+<button data-popover-target="popover-company-profile" type="button" class="text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Company profile</button>
+
+<div data-popover id="popover-company-profile" role="tooltip" class="absolute z-10 invisible inline-block w-80 text-sm text-body transition-opacity duration-300 bg-neutral-primary-soft border border-default rounded-base shadow-xs opacity-0">
+    <div class="p-3">
+        <div class="flex">
+            <div class="me-3 shrink-0">
+                <a href="#" class="block w-10 h-10 flex items-center justify-center p-2 bg-neutral-tertiary rounded">
+                <img class="w-8 h-8 rounded-full" src="https://flowbite.com/docs/images/logo.svg" alt="Flowbite logo">
+            </a>
+            </div>
+            <div>
+                <p class="text-base font-semibold text-heading">
+                    <a href="#" class="hover:underline">Flowbite</a>
+                </p>
+                <p class="mb-3 text-sm font-normal">
+                    Tech company
+                </p>
+                <p class="mb-3 text-sm">Breaking news alerts and the most talked about stories.</p>
+                <ul class="text-sm">
+                    <li class="flex items-center mb-2">
+                        <span class="me-2 font-semibold text-body">
+                            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.213 9.787a3.391 3.391 0 0 0-4.795 0l-3.425 3.426a3.39 3.39 0 0 0 4.795 4.794l.321-.304m-.321-4.49a3.39 3.39 0 0 0 4.795 0l3.424-3.426a3.39 3.39 0 0 0-4.794-4.795l-1.028.961"/></svg>
+                        </span>
+                        <a href="#" class="font-medium text-fg-brand hover:underline">https://flowbite.com/</a>
+                    </li>
+                    <li class="flex items-start mb-2">
+                        <span class="me-2 text-body">
+                            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.01 6.001C6.5 1 1 8 5.782 13.001L12.011 20l6.23-7C23 8 17.5 1 12.01 6.002Z"/></svg>
+                        </span>
+                        <span class="-mt-1">102,567,936 people like this including 5 of your friends</span>
+                    </li>
+                </ul>
+                <div class="flex mb-4 -space-x-3 rtl:space-x-reverse">
+                    <img class="w-8 h-8 border-2 border-buffer-medium rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="">
+                    <img class="w-8 h-8 border-2 border-buffer-medium rounded-full" src="/docs/images/people/profile-picture-2.jpg" alt="">
+                    <img class="w-8 h-8 border-2 border-buffer-medium rounded-full" src="/docs/images/people/profile-picture-3.jpg" alt="">
+                    <a class="flex items-center justify-center w-8 h-8 text-xs font-medium text-heading bg-neutral-tertiary border-2 border-buffer-medium rounded-full hover:bg-neutral-quaternary" href="#">+3</a>
+                </div>
+                <div class="flex space-x-2">
+                    <button type="button" class="flex items-center justify-center w-full text-body bg-neutral-primary-medium border border-default-medium hover:bg-neutral-secondary-strong hover:text-heading hover:border-default-strong focus:ring-4 focus:ring-neutral-tertiary-soft shadow-xs font-medium leading-5 rounded-base text-sm px-3 py-2 focus:outline-none">
+                        <svg class="w-4 h-4 me-1.5 -ms-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11c.889-.086 1.416-.543 2.156-1.057a22.323 22.323 0 0 0 3.958-5.084 1.6 1.6 0 0 1 .582-.628 1.549 1.549 0 0 1 1.466-.087c.205.095.388.233.537.406a1.64 1.64 0 0 1 .384 1.279l-1.388 4.114M7 11H4v6.5A1.5 1.5 0 0 0 5.5 19v0A1.5 1.5 0 0 0 7 17.5V11Zm6.5-1h4.915c.286 0 .372.014.626.15.254.135.472.332.637.572a1.874 1.874 0 0 1 .215 1.673l-2.098 6.4C17.538 19.52 17.368 20 16.12 20c-2.303 0-4.79-.943-6.67-1.475"/></svg>
+                        Like page
+                    </button>
+                    <button id="dropdown-button" data-dropdown-toggle="dropdown-menu" data-dropdown-placement="right" type="button" class="flex items-center justify-center text-body bg-neutral-primary-medium border border-default-medium hover:bg-neutral-secondary-strong hover:text-heading hover:border-default-strong focus:ring-4 focus:ring-neutral-tertiary-soft shadow-xs font-medium leading-5 rounded-base w-9 h-9 shrink-0 focus:outline-none">
+                        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M6 12h.01m6 0h.01m5.99 0h.01"/></svg>
+                    </button>
+                </div>
+                <div id="dropdown-menu" class="z-10 hidden bg-neutral-primary-medium border border-default-medium rounded-base shadow-lg w-44">
+                    <ul class="p-2 text-sm text-body font-medium" aria-labelledby="dropdown-button">
+                        <li>
+                            <a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Report this page</a>
+                        </li>
+                        <li>
+                            <a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Add to favorites</a>
+                        </li>
+                        <li>
+                            <a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Block this page</a>
+                        </li>
+                        <li>
+                            <a href="#" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">Invite users</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div data-popper-arrow></div>
+</div>
+{{< /example >}}
+
+## Image popover
+
+Use this example to trigger a popover component with detailed information and an image when hovering over a portion of highlighted text inspired by Wikipedia and other large news outlets.
+
+{{< example class="flex justify-center pt-72" github="components/popover.md" show_dark=true >}}
+
+<p class="text-body">Due to its central geographic location in Southern Europe, <a href="#" class="text-fg-brand font-medium underline hover:no-underline" data-popover-target="popover-image">Italy</a> has historically been home to myriad peoples and cultures. In addition to the various ancient peoples dispersed throughout what is now modern-day Italy, the most predominant being the Indo-European Italic peoples who gave the peninsula its name, beginning from the classical era, Phoenicians and Carthaginians founded colonies mostly in insular Italy</p>
+<div data-popover id="popover-image" role="tooltip" class="absolute z-10 p-3 invisible inline-block text-sm text-body transition-opacity duration-300 bg-neutral-primary-soft border border-default rounded-lg shadow-xs opacity-0 w-96">
+    <div class="grid grid-cols-5">
+        <div class="col-span-3 pe-3">
+            <div class="space-y-2">
+                <h3 class="font-semibold text-heading">About Italy</h3>
+                <p class="mb-2">Italy is located in the middle of the Mediterranean Sea, in Southern Europe it is also part of Western Europe.</p>
+                <p>A unitary parliamentary republic with Rome as its capital and largest city.</p>
+                <a href="#" class="flex items-center font-medium text-fg-brand hover:underline">
+                    Read more 
+                    <svg class="w-4 h-4 ms-1 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H5m14 0-4 4m4-4-4-4"/></svg>
+                </a>
+            </div>
+        </div>
+        <img src="/docs/images/popovers/italy.png" class="h-full col-span-2 rounded" alt="Italy map" />
+    </div>
+    <div data-popper-arrow></div>
+</div>
+{{< /example >}}
+
+## Description popover
+
+Show helpful information inside a popover when hovering over a question mark button.
+
+{{< example class="pb-96" github="components/popover.md" show_dark=true >}}
+
+<p class="flex items-center text-sm text-body">This is just some informational text <button data-popover-target="popover-description" data-popover-placement="bottom-end" type="button"><svg class="w-4 h-4 text-body hover:text-heading ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.529 9.988a2.502 2.502 0 1 1 5 .191A2.441 2.441 0 0 1 12 12.582V14m-.01 3.008H12M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg><span class="sr-only">Show information</span></button></p>
+<div data-popover id="popover-description" role="tooltip" class="absolute z-10 p-3 invisible inline-block text-sm text-body transition-opacity duration-300 bg-neutral-primary-soft border border-default rounded-base shadow-xs opacity-0 w-72">
+    <div>
+        <h3 class="font-semibold text-heading mb-2">Activity growth - Incremental</h3>
+        <p class="mb-4">Report helps navigate cumulative growth of community activities. Ideally, the chart should have a growing trend, as stagnating chart signifies a significant decrease of community activity.</p>
+        <h3 class="font-semibold text-heading mb-2">Calculation</h3>
+        <p class="mb-4">For each date bucket, the all-time volume of activities is calculated. This means that activities in period n contain all activities up to period n, plus the activities generated by your community in period.</p>
+        <a href="#" class="flex items-center font-medium text-fg-brand hover:underline">
+            Read more 
+            <svg class="w-4 h-4 ms-1 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H5m14 0-4 4m4-4-4-4"/></svg>
+        </a>
+    </div>
+    <div data-popper-arrow></div>
+</div>
+{{< /example >}}
+
+## Progress popover
+
+Show a progress bar with details inside a popover when hovering over a settings button.
+
+{{< example class="flex justify-center pt-52" github="components/popover.md" show_dark=true >}}
+<button data-popover-target="popover-description" type="button" class="inline-flex items-center  text-white bg-brand hover:bg-brand-strong box-border border border-transparent focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">
+    <svg class="w-4 h-4 me-1.5 -ms-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 6c0 1.657-3.134 3-7 3S5 7.657 5 6m14 0c0-1.657-3.134-3-7-3S5 4.343 5 6m14 0v6M5 6v6m0 0c0 1.657 3.134 3 7 3s7-1.343 7-3M5 12v6c0 1.657 3.134 3 7 3s7-1.343 7-3v-6"/></svg>
+    Storage status
+</button>
+
+<div data-popover id="popover-description" role="tooltip" class="absolute z-10 p-3 invisible inline-block w-64 text-sm text-body transition-opacity duration-300 bg-neutral-primary-soft border border-default rounded-base shadow-xs opacity-0">
+    <div class="space-y-2.5">
+        <h3 class="font-semibold text-heading">Available storage</h3>
+        <p>This server has <span class="font-semibold text-heading">30</span> of <span class="font-semibold text-heading">150 GB</span> of block storage remaining.</p>
+        <div class="w-full bg-neutral-quaternary rounded-full h-1.5 mb-4">
+            <div class="bg-danger h-1.5 rounded-full" style="width: 85%"></div>
+        </div>
+    </div>
+    <a href="#" class="flex items-center font-medium text-fg-brand hover:underline">
+        Upgrade now
+        <svg class="w-4 h-4 ms-1 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H5m14 0-4 4m4-4-4-4"/></svg>
+    </a>
+    <div data-popper-arrow></div>
+</div>
+{{< /example >}}
+
+## Password strength
+
+Dynamically show the password strength progress when creating a new password positioned relative to the input element.
+
+{{< example github="components/popover.md" iframeHeight="480" show_dark=true >}}
+
+<form>
+    <div class="mb-6">
+        <label for="email" class="block mb-2.5 text-sm font-medium text-heading">Your email</label>
+        <input type="email" id="email" class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body" placeholder="name@flowbite.com" required />
+    </div>
+    <div class="mb-6">
+        <label for="password" class="block mb-2.5 text-sm font-medium text-heading">Your password</label>
+        <input data-popover-target="popover-password" data-popover-placement="bottom" type="password" id="password" class="bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full px-3 py-2.5 shadow-xs placeholder:text-body" required />
+        <div data-popover id="popover-password" role="tooltip" class="absolute z-10 p-3 invisible inline-block w-72 text-sm text-body transition-opacity duration-300 bg-neutral-primary-soft border border-default rounded-base shadow-xs opacity-0">
+            <div>
+                <h3 class="font-semibold text-heading mb-3">Must have at least 6 characters</h3>
+                <div class="grid grid-cols-4 gap-2 mb-3">
+                    <div class="h-1 bg-warning rounded-full"></div>
+                    <div class="h-1 bg-warning rounded-full"></div>
+                    <div class="h-1 bg-neutral-quaternary rounded-full"></div>
+                    <div class="h-1 bg-neutral-quaternary rounded-full"></div>
+                </div>
+                <p class="mb-2">It’s better to have:</p>
+                <ul>
+                    <li class="flex items-center mb-1">
+                        <svg class="w-4 h-4 me-1.5 text-success" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 11.917 9.724 16.5 19 7.5"/></svg>
+                        Upper & lower case letters
+                    </li>
+                    <li class="flex items-center mb-1">
+                        <svg class="w-4 h-4 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg>
+                        A symbol (#$&)
+                    </li>
+                    <li class="flex items-center">
+                        <svg class="w-4 h-4 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg>
+                        A longer password (min. 12 chars.)
+                    </li>
+                </ul>
+            </div>
+            <div data-popper-arrow></div>
+        </div>
+    </div>
+    <div class="flex items-start mb-6">
+        <div class="flex items-center h-5">
+        <input id="remember" type="checkbox" value="" class="w-4 h-4 border border-default-strong rounded-xs bg-neutral-secondary-strong focus:ring-2 focus:ring-brand-soft" required />
+        </div>
+        <label for="remember" class="ms-2 text-sm font-medium text-heading">I agree with the <a href="#" class="text-fg-brand hover:underline">terms and conditions</a>.</label>
+    </div>
+    <button type="submit" class="text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Submit</button>
+</form>
+{{< /example >}}
+
+## Placement
+
+Set the position of the popover component relative to the trigger element by using the `data-popover-placement="{top|right|bottom|left}"` data attribute and its values.
+
+{{< example class="flex flex-wrap justify-center py-24 space-x-4" github="components/popover.md" show_dark=true >}}
+<button data-popover-target="popover-top" data-popover-placement="top" type="button" class="text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Top popover</button>
+
+<div data-popover id="popover-top" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm text-body transition-opacity duration-300 bg-neutral-primary-soft border border-default rounded-base shadow-xs opacity-0">
+    <div class="px-3 py-2 bg-neutral-tertiary border-b border-default rounded-t-base">
+        <h3 class="font-medium text-heading">Popover top</h3>
+    </div>
+    <div class="px-3 py-2">
+        <p>And here's some amazing content. It's very engaging. Right?</p>
+    </div>
+    <div data-popper-arrow></div>
+</div>
+<button data-popover-target="popover-right" data-popover-placement="right" type="button" class="text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Right popover</button>
+<div data-popover id="popover-right" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm text-body transition-opacity duration-300 bg-neutral-primary-soft border border-default rounded-base shadow-xs opacity-0">
+    <div class="px-3 py-2 bg-neutral-tertiary border-b border-default rounded-t-base">
+        <h3 class="font-medium text-heading">Popover right</h3>
+    </div>
+    <div class="px-3 py-2">
+        <p>And here's some amazing content. It's very engaging. Right?</p>
+    </div>
+    <div data-popper-arrow></div>
+</div>
+<button data-popover-target="popover-bottom" data-popover-placement="bottom" type="button" class="text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Bottom popover</button>
+<div data-popover id="popover-bottom" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm text-body transition-opacity duration-300 bg-neutral-primary-soft border border-default rounded-base shadow-xs opacity-0">
+    <div class="px-3 py-2 bg-neutral-tertiary border-b border-default rounded-t-base">
+        <h3 class="font-medium text-heading">Popover bottom</h3>
+    </div>
+    <div class="px-3 py-2">
+        <p>And here's some amazing content. It's very engaging. Right?</p>
+    </div>
+    <div data-popper-arrow></div>
+</div>
+<button data-popover-target="popover-left" data-popover-placement="left" type="button" class="text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Left popover</button>
+<div data-popover id="popover-left" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm text-body transition-opacity duration-300 bg-neutral-primary-soft border border-default rounded-base shadow-xs opacity-0">
+    <div class="px-3 py-2 bg-neutral-tertiary border-b border-default rounded-t-base">
+        <h3 class="font-medium text-heading">Popover left</h3>
+    </div>
+    <div class="px-3 py-2">
+        <p>And here's some amazing content. It's very engaging. Right?</p>
+    </div>
+    <div data-popper-arrow></div>
+</div>
+{{< /example >}}
+
+## Triggering
+
+Manually set the trigger event by adding the `data-popover-trigger="{hover|click}"` data attribute to the trigger element choosing between a hover or click event. By default it is set to `hover`.
+
+{{< example class="flex justify-center space-x-4 pt-32" github="components/popover.md" show_dark=true >}}
+<button data-popover-target="popover-hover" data-popover-trigger="hover" type="button" class="text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Hover popover</button>
+
+<div data-popover id="popover-hover" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm text-body transition-opacity duration-300 bg-neutral-primary-soft border border-default rounded-base shadow-xs opacity-0">
+    <div class="px-3 py-2 bg-neutral-tertiary border-b border-default rounded-t-base">
+        <h3 class="font-medium text-heading">Popover left</h3>
+    </div>
+    <div class="px-3 py-2">
+        <p>And here's some amazing content. It's very engaging. Right?</p>
+    </div>
+    <div data-popper-arrow></div>
+</div>
+
+<button data-popover-target="popover-click" data-popover-trigger="click" type="button" class="text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Click popover</button>
+
+<div data-popover id="popover-click" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm text-body transition-opacity duration-300 bg-neutral-primary-soft border border-default rounded-base shadow-xs opacity-0">
+    <div class="px-3 py-2 bg-neutral-tertiary border-b border-default rounded-t-base">
+        <h3 class="font-medium text-heading">Popover left</h3>
+    </div>
+    <div class="px-3 py-2">
+        <p>And here's some amazing content. It's very engaging. Right?</p>
+    </div>
+    <div data-popper-arrow></div>
+</div>
+{{< /example >}}
+
+## Offset
+
+Increase or decrease the default offset by adding the `data-popover-offset="{offset}"` data attribute where the value is an integer.
+
+{{< example class="flex justify-center pt-32" github="components/popover.md" show_dark=true >}}
+<button data-popover-target="popover-offset" data-popover-offset="30" type="button" class="text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Offset popover</button>
+
+<div data-popover id="popover-offset" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm text-body transition-opacity duration-300 bg-neutral-primary-soft border border-default rounded-base shadow-xs opacity-0">
+    <div class="px-3 py-2 bg-neutral-tertiary border-b border-default rounded-t-base">
+        <h3 class="font-medium text-heading">Popover left</h3>
+    </div>
+    <div class="px-3 py-2">
+        <p>And here's some amazing content. It's very engaging. Right?</p>
+    </div>
+    <div data-popper-arrow></div>
+</div>
+{{< /example >}}
+
+## Animation
+
+Customize the animation of the popover component by using the utility classes from Tailwind CSS such as `transition-opacity` and `duration-{x}`.
+
+{{< example class="flex justify-center pt-32" github="components/popover.md" show_dark=true >}}
+<button data-popover-target="popover-animation" type="button" class="text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Animated popover</button>
+
+<div data-popover id="popover-animation" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm text-body transition-opacity duration-300 bg-neutral-primary-soft border border-default rounded-base shadow-xs opacity-0">
+    <div class="px-3 py-2 bg-neutral-tertiary border-b border-default rounded-t-base">
+        <h3 class="font-medium text-heading">Popover left</h3>
+    </div>
+    <div class="px-3 py-2">
+        <p>And here's some amazing content. It's very engaging. Right?</p>
+    </div>
+    <div data-popper-arrow></div>
+</div>
+{{< /example >}}
+
+## Disable arrow
+
+You can also disable the popover arrow by not including the `data-popper-arrow` element.
+
+{{< example class="flex justify-center pt-32" github="components/popover.md" show_dark=true >}}
+<button data-popover-target="popover-no-arrow" type="button" class="text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Default popover</button>
+
+<div data-popover id="popover-no-arrow" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm text-body transition-opacity duration-300 bg-neutral-primary-soft border border-default rounded-base shadow-xs opacity-0">
+    <div class="px-3 py-2 bg-neutral-tertiary border-b border-default rounded-t-base">
+        <h3 class="font-medium text-heading">Popover left</h3>
+    </div>
+    <div class="px-3 py-2">
+        <p>And here's some amazing content. It's very engaging. Right?</p>
+    </div>
+</div>
+{{< /example >}}
+
+## JavaScript behaviour
+
+The Popover API from Flowbite can be used to create an object that will show a pop-up box relative to the main trigger element based on the parameters, options, and methods that you provide.
+
+### Object parameters
+
+Create a new Popover object with the object parameters like the trigger element, the popover content element, and extra options to set the placement and offset.
+
+<div class="relative my-10 overflow-x-auto shadow-xs rounded-base border border-default">
+    <table class="w-full text-sm text-left text-body">
+        <thead class="bg-neutral-secondary-soft text-heading">
+            <tr class="text-xs font-medium uppercase">
+                <th scope="col" class="px-6 py-3">
+                    Parameter
+                </th>
+                <th scope="col" class="px-6 py-3">
+                    Type
+                </th>
+                <th scope="col" class="px-6 py-3">
+                    Required
+                </th>
+                <th scope="col" class="px-6 py-3">
+                    Description
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr class="border-b bg-neutral-primary border-default">
+                <td class="px-6 py-4 font-medium">
+                    <code class="text-fg-brand">targetEl</code>
+                </td>
+                <td class="px-6 py-4">
+                    Element
+                </td>
+                <td class="px-6 py-4">
+                    Required
+                </td>
+                <td class="px-6 py-4">
+                    Set the popover component as the target element.
+                </td>
+            </tr>
+            <tr class="border-b bg-neutral-primary border-default">
+                <td class="px-6 py-4 font-medium">
+                    <code class="text-fg-brand">triggerEl</code>
+                </td>
+                <td class="px-6 py-4">
+                    Element
+                </td>
+                <td class="px-6 py-4">
+                    Required
+                </td>
+                <td class="px-6 py-4">
+                    Set an element to trigger the popover when clicking or hovering (ie. a button, text).
+                </td>
+            </tr>
+            <tr class="border-b bg-neutral-primary border-default">
+                <td class="px-6 py-4 font-medium">
+                    <code class="text-fg-brand">options</code>
+                </td>
+                <td class="px-6 py-4">
+                    Object
+                </td>
+                <td class="px-6 py-4">
+                    Optional
+                </td>
+                <td class="px-6 py-4">
+                    Use the options parameter to set the positioning of the popover element, trigger type, offset, and more.
+                </td>
+            </tr>
+            <tr class="bg-neutral-primary">
+                <td class="px-6 py-4 font-medium">
+                    <code class="text-fg-brand">instanceOptions</code>
+                </td>
+                <td class="px-6 py-4">
+                    Object
+                </td>
+                <td class="px-6 py-4">
+                    Optional
+                </td>
+                <td class="px-6 py-4">
+                   Object of options that allows you to set a custom ID for the instance that is being added to the <a href="https://flowbite.com/docs/getting-started/javascript/#instance-options" class="underline hover:no-underline">Instance Manager</a> and whether to override or not an existing instance.
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+### Options
+
+Use the following options as the third parameter for the Popover object to set the positioning, offset, and the trigger type (hover or click).
+
+<div class="relative my-10 overflow-x-auto shadow-xs rounded-base border border-default">
+    <table class="w-full text-sm text-left text-body">
+        <thead class="bg-neutral-secondary-soft text-heading">
+            <tr class="text-xs font-medium uppercase">
+                <th scope="col" class="px-6 py-3">
+                    Option
+                </th>
+                <th scope="col" class="px-6 py-3">
+                    Type
+                </th>
+                <th scope="col" class="px-6 py-3">
+                    Description
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr class="border-b bg-neutral-primary border-default">
+                <td class="px-6 py-4 font-medium">
+                    <code class="text-fg-brand">placement</code>
+                </td>
+                <td class="px-6 py-4 font-medium">
+                    String
+                </td>
+                <td class="px-6 py-4">
+                    Set the position of the popover element relative to the trigger element choosing from <code class="text-purple-600 dark:text-purple-400">top|right|bottom|left</code>.
+                </td>
+            </tr>
+            <tr class="border-b bg-neutral-primary border-default">
+                <td class="px-6 py-4 font-medium">
+                    <code class="text-fg-brand">triggerType</code>
+                </td>
+                <td class="px-6 py-4 font-medium">
+                    String
+                </td>
+                <td class="px-6 py-4">
+                    Set the event type that will trigger the popover content choosing between <code class="text-purple-600 dark:text-purple-400">hover|click|none</code>.
+                </td>
+            </tr>
+            <tr class="border-b bg-neutral-primary border-default">
+                <td class="px-6 py-4 font-medium">
+                    <code class="text-fg-brand">offset</code>
+                </td>
+                <td class="px-6 py-4 font-medium">
+                    Integer
+                </td>
+                <td class="px-6 py-4">
+                    Set the offset distance between the popover and the trigger element.
+                </td>
+            </tr>
+            <tr class="border-b bg-neutral-primary border-default">
+                <td class="px-6 py-4 font-medium">
+                    <code class="text-fg-brand">onHide</code>
+                </td>
+                <td class="px-6 py-4 font-medium">
+                    Function
+                </td>
+                <td class="px-6 py-4">
+                    Set a callback function when the popover is hidden.
+                </td>
+            </tr>
+            <tr class="border-b bg-neutral-primary border-default">
+                <td class="px-6 py-4 font-medium">
+                    <code class="text-fg-brand">onShow</code>
+                </td>
+                <td class="px-6 py-4 font-medium">
+                    Function
+                </td>
+                <td class="px-6 py-4">
+                    Set a callback function when the popover is shown.
+                </td>
+            </tr>
+            <tr class="bg-neutral-primary">
+                <td class="px-6 py-4 font-medium">
+                    <code class="text-fg-brand">onToggle</code>
+                </td>
+                <td class="px-6 py-4 font-medium">
+                    Function
+                </td>
+                <td class="px-6 py-4">
+                    Set a callback function when the popover visibility has been toggled.
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+### Methods
+
+Use the methods from the Popover object to programmatically show or hide the popover from directly JavaScript.
+
+<div class="relative my-10 overflow-x-auto shadow-xs rounded-base border border-default">
+    <table class="w-full text-sm text-left text-body">
+        <thead class="bg-neutral-secondary-soft text-heading">
+            <tr class="text-xs font-medium uppercase">
+                <th scope="col" class="px-6 py-3">
+                    Method
+                </th>
+                <th scope="col" class="px-6 py-3">
+                    Description
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr class="border-b bg-neutral-primary border-default">
+                <td class="px-6 py-4 font-medium">
+                    <code class="text-fg-brand">show()</code>
+                </td>
+                <td class="px-6 py-4">
+                    Use this method on the Popover object to show the popover content.
+                </td>
+            </tr>
+            <tr class="border-b bg-neutral-primary border-default">
+                <td class="px-6 py-4 font-medium">
+                    <code class="text-fg-brand">hide()</code>
+                </td>
+                <td class="px-6 py-4">
+                    Use this method on the Popover object to hide the popover content.
+                </td>
+            </tr>
+            <tr class="border-b bg-neutral-primary border-default">
+                <td class="px-6 py-4 font-medium">
+                    <code class="text-fg-brand">toggle()</code>
+                </td>
+                <td class="px-6 py-4">
+                    Use this method on the Popover object to toggle the visibility of the popover content.
+                </td>
+            </tr>
+            <tr class="border-b bg-neutral-primary border-default">
+                <td class="px-6 py-4 font-medium">
+                    <code class="text-fg-brand">isVisible()</code>
+                </td>
+                <td class="px-6 py-4">
+                    Use this function to check if the popover is visible or not.
+                </td>
+            </tr>
+            <tr class="border-b bg-neutral-primary border-default">
+                <td class="px-6 py-4 font-medium">
+                    <code class="text-fg-brand">updateOnShow(callback)</code>
+                </td>
+                <td class="px-6 py-4">
+                    Use this method to set a custom callback function when the popover has been shown.
+                </td>
+            </tr>
+            <tr class="border-b bg-neutral-primary border-default">
+                <td class="px-6 py-4 font-medium">
+                    <code class="text-fg-brand">updateOnHide(callback)</code>
+                </td>
+                <td class="px-6 py-4">
+                    Use this method to set a custom callback function when the popover has been hidden.
+                </td>
+            </tr>
+            <tr class="bg-neutral-primary">
+                <td class="px-6 py-4 font-medium">
+                    <code class="text-fg-brand">updateOnToggle(callback)</code>
+                </td>
+                <td class="px-6 py-4">
+                    Use this method to set a custom callback function when the popover has been toggled.
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+### Example
+
+Use following JavaScript as an example to learn how to initialize, set the options, and use the methods for the Popover object.
+
+First of all, set the target element as the popover itself and the trigger element which can be a button or text element.
+
+After that you can also set the options object to change the placement and trigger type of the popover, alongside with the callback functions.
+
+{{< code lang="javascript" file="popover.js" icon="file" >}}
+// set the popover content element
+const $targetEl = document.getElementById('popoverContent');
+
+// set the element that trigger the popover using hover or click
+const $triggerEl = document.getElementById('popoverButton');
+
+// options with default values
+const options = {
+    placement: 'bottom',
+    triggerType: 'hover',
+    offset: 10,
+    onHide: () => {
+        console.log('popover is shown');
+    },
+    onShow: () => {
+        console.log('popover is hidden');
+    },
+    onToggle: () => {
+        console.log('popover is toggled');
+    },
+};
+
+// instance options object
+const instanceOptions = {
+  id: 'popoverContent',
+  override: true
+};
+{{< /code >}}
+
+Create a new Popover object based on the options above.
+
+{{< code lang="javascript" file="popover.js" icon="file" >}}
+import { Popover } from 'flowbite';
+
+/*
+ * $targetEl: required
+ * $triggerEl: required
+ * options: optional
+ */
+const popover = new Popover($targetEl, $triggerEl, options, instanceOptions);
+{{< /code >}}
+
+Use the `show` and `hide` methods on the Popover object to programmatically show and hide the popover element using JavaScript.
+
+{{< code lang="javascript" file="popover.js" icon="file" >}}
+// show the popover
+popover.show();
+
+// hide the popover
+popover.hide();
+
+// toggle the popover
+popover.toggle();
+
+// check if popover is visible
+popover.isVisible();
+
+// destroy popover object (removes event listeners and off-canvas Popper.js)
+tooltip.destroy();
+
+// re-initialize popover object
+tooltip.init();
+{{< /code >}}
+
+### HTML Markup
+
+Use the following HTML code for the JavaScript example above.
+
+{{< code lang="html" file="popover.html" icon="file" >}}
+<button
+    id="popoverButton"
+    type="button"
+    class="rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+    Default popover
+</button>
+<div
+    data-popover
+    id="popoverContent"
+    role="tooltip"
+    class="invisible absolute z-10 inline-block w-64 rounded-lg border border-gray-200 bg-white text-sm text-gray-500 opacity-0 shadow-xs transition-opacity duration-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400"
+>
+    <div
+        class="rounded-t-lg border-b border-gray-200 bg-gray-100 px-3 py-2 dark:border-gray-600 dark:bg-gray-700"
+    >
+        <h3 class="font-semibold text-gray-900 dark:text-white">
+            Popover title
+        </h3>
+    </div>
+    <div class="px-3 py-2">
+        <p>And here's some amazing content. It's very engaging. Right?</p>
+    </div>
+    <div data-popper-arrow></div>
+</div>
+{{< /code >}}
+
+### TypeScript
+
+If you're using the <a href="{{< ref "getting-started/typescript" >}}">TypeScript configuration</a> from Flowbite then you can import the types for the Popover class, parameters and its options.
+
+Here's an example that applies the types from Flowbite to the code above:
+
+{{< code lang="typescript" file="popover.ts" icon="file" >}}
+import { Popover } from 'flowbite';
+import type { PopoverOptions, PopoverInterface } from 'flowbite';
+import type { InstanceOptions } from 'flowbite';
+
+// set the popover content element
+const $targetEl: HTMLElement = document.getElementById('popoverContent');
+
+// set the element that trigger the popover using hover or click
+const $triggerEl: HTMLElement = document.getElementById('popoverButton');
+
+// options with default values
+const options: PopoverOptions = {
+    placement: 'top',
+    triggerType: 'hover',
+    offset: 10,
+    onHide: () => {
+        console.log('popover is shown');
+    },
+    onShow: () => {
+        console.log('popover is hidden');
+    },
+    onToggle: () => {
+        console.log('popover is toggled');
+    },
+};
+
+// instance options object
+const instanceOptions: InstanceOptions = {
+  id: 'popoverContent',
+  override: true
+};
+
+if ($targetEl) {
+    /*
+     * targetEl: required
+     * triggerEl: required
+     * options: optional
+     * instanceOptions: optional
+     */
+    const popover: PopoverInterface = new Popover(
+        $targetEl,
+        $triggerEl,
+        options,
+        instanceOptions
+    );
+
+    popover.show();
+}
+{{< /code >}}