# Popover

> A popover is a small overlay with a title and a body, for information that doesn't fit in a tooltip.

Show extra information in popovers when a tooltip is not enough. Set the placement and trigger to control how they appear.

Source: https://docs.tabler.io/ui/components/popover

---

## Default markup

To create a default popover use:

```html
<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>
```

## Four directions

Four options are available: `top`, `right`, `bottom`, and `left` aligned. Directions are mirrored when using Bootstrap in [RTL](/ui/getting-started/rtl).

```html
<div class="btn-list">
  <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>
</div>
```

## Popover on hover

A popover can open on `click`, `hover`, `focus` or `manual`, set with `data-bs-trigger`. This one opens on hover. See the [Bootstrap documentation](https://getbootstrap.com/docs) for the details.

```html
<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>
```

## JavaScript

Tabler automatically initializes all elements with `data-bs-toggle="popover"` on page load. This is the code that runs:

```ts
const popoverTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[data-bs-toggle="popover"]'))
popoverTriggerList.map(function (popoverTriggerEl: HTMLElement) {
  const options = {
    delay: { show: 50, hide: 50 },
    html: popoverTriggerEl.getAttribute('data-bs-html') === 'true',
    placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto',
  }
  return new Popover(popoverTriggerEl, options)
})
```

_Source: `core/js/src/popover.ts`_

## Accessibility

- The trigger must be a `button` or a link with an `href`, so it can take focus. Bootstrap manages `aria-describedby` while the popover is open.
- Popovers open on click by default, which is what makes their content reachable. If you switch to `data-bs-trigger="hover"`, the content becomes unreachable by keyboard.
- Set `data-bs-trigger="focus"` to make a popover dismiss itself when focus leaves, which is the closest thing to <kbd>Escape</kbd> behavior.
- Tabler enables HTML in a popover only when you set `data-bs-html="true"`. Leave it off for content that comes from users.
- Keep the title and body as text. A popover holding a form is a modal in disguise - use a real dialog for that.

## SCSS variables

Use these SCSS variables to customize popovers. The default values are:

```scss
$popover-font-size: $font-size-sm;
$popover-bg: var(--bg-surface);
$popover-max-width: 276px;
$popover-border-width: var(--border-width);
$popover-border-color: var(--border-color);
$popover-border-radius: var(--border-radius-lg);
$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}); // stylelint-disable-line function-disallowed-list
$popover-box-shadow: var(--shadow-lg);

$popover-header-font-size: $font-size-base;
$popover-header-bg: transparent;
$popover-header-color: $headings-color;
$popover-header-padding-y: 0.5rem;
$popover-header-padding-x: $spacer;

$popover-body-color: inherit;
$popover-body-padding-y: 0.5rem;
$popover-body-padding-x: 0.5rem;

$popover-arrow-width: 1rem;
$popover-arrow-height: 0.5rem;
```

_Source: `core/scss/_variables.scss`_