mirror of
https://github.com/tabler/tabler.git
synced 2026-10-22 15:47:27 +04:00
45 lines
2.4 KiB
Plaintext
45 lines
2.4 KiB
Plaintext
---
|
|
title: Popover
|
|
summary: A popover is used to provide additional information for elements where a simple tooltip is not sufficient.
|
|
description: Show extra information in popovers when a tooltip is not enough. Set the placement and trigger to control how they appear.
|
|
related: [/ui/components/tooltip, /ui/components/dropdown]
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
import CodeDocs from '@components/CodeDocs.astro';
|
|
|
|
## Default markup
|
|
|
|
To create a default popover use:
|
|
|
|
<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>
|
|
</Example>
|
|
|
|
## Four directions
|
|
|
|
Four options are available: `top`, `right`, `bottom`, and `left` aligned. Directions are mirrored when using Bootstrap in RTL.
|
|
|
|
<Example centered>
|
|
<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>
|
|
</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>
|
|
<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>
|
|
|
|
## JavaScript
|
|
|
|
Tabler automatically initializes all elements with `data-bs-toggle="popover"` on page load. This is the code that runs:
|
|
|
|
<CodeDocs name="popover-init" file="core/js/src/popover.ts" />
|
|
|
|
## SCSS variables
|
|
|
|
Use these SCSS variables to customize popovers. The default values are:
|
|
|
|
<CodeDocs name="popover-variables" file="core/scss/_variables.scss" />
|