---
title: Popover
summary: A popover is used to provide additional information for elements where a simple tooltip is not sufficient.
description: Provide extra information with a popover.
layout: '@layouts/DocsMdxLayout.astro'
---
import Example from '@components/Example.astro';

## Default markup

To create a default popover use:

<Example centered bg="surface-secondary">
<button type="button" class="btn" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?" > Click to toggle popover </button>
</Example>

## Four directions

Four options are available: `top`, `right`, `bottom`, and `left` aligned. Directions are mirrored when using Bootstrap in RTL.

<Example centered bg="surface-secondary">
<button type="button" class="btn" 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" 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" 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" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover" > Popover on left </button>
</Example>

## Popover on hover

Popover can be triggered in one or more of the following styles: `manual`, with a `click`, on `focus`, and on `hover`. This one reacts on hover. See more details on the Popover component page of [Bootstrap's documentation](https://getbootstrap.com/docs)

<Example centered bg="surface-secondary">
<button type="button" class="btn btn-primary" data-bs-trigger="hover" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?" > Hover to toggle popover </button>
</Example>
