mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
56 lines
2.6 KiB
Plaintext
56 lines
2.6 KiB
Plaintext
---
|
|
title: Popovers
|
|
description: Popovers are used to provide additional information on elements where a simple tooltip is not sufficient.
|
|
bootstrapLink: components/popovers
|
|
---
|
|
|
|
## Default markup
|
|
|
|
To create a default popover use:
|
|
|
|
```html code example centered
|
|
<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.
|
|
|
|
```html example centered separated
|
|
<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>
|
|
```
|
|
|
|
```html
|
|
<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>
|
|
```
|
|
|
|
## Popover on hover
|
|
|
|
Popover can be triggered `manual`, with a `click` and on `focus` and on `hover`. This one reacts on hover.
|
|
|
|
```html example centered
|
|
<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>
|
|
```
|
|
|
|
```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>
|
|
```
|