mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 01:44:25 +04:00
143 lines
2.9 KiB
Plaintext
143 lines
2.9 KiB
Plaintext
---
|
|
title: Popovers
|
|
summary: Popovers are used to provide additional information on elements where a simple tooltip is not sufficient.
|
|
bootstrapLink: components/popovers
|
|
description: Provide extra information with popovers.
|
|
---
|
|
|
|
## Default markup
|
|
|
|
To create a default popover use:
|
|
|
|
```html 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 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)
|
|
|
|
```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>
|
|
```
|