diff options
| author | Mark Otto <markdotto@gmail.com> | 2021-07-29 09:21:53 +0300 |
|---|---|---|
| committer | Mark Otto <otto@github.com> | 2022-03-09 01:53:53 +0300 |
| commit | fdcbbe3d92925305031ff76988d8276afb6a3277 (patch) | |
| tree | 3cc06b4eea72c166262a434c6e33822538d0dbcb /site/content/docs | |
| parent | 6c40476af9b2d54fc8029294be1d9e4e8a246482 (diff) | |
Convert tooltips to CSS vars
Diffstat (limited to 'site/content/docs')
| -rw-r--r-- | site/content/docs/5.1/components/tooltips.md | 23 |
1 files changed, 23 insertions, 0 deletions
diff --git a/site/content/docs/5.1/components/tooltips.md b/site/content/docs/5.1/components/tooltips.md index 16501a3c96..1f1613fd03 100644 --- a/site/content/docs/5.1/components/tooltips.md +++ b/site/content/docs/5.1/components/tooltips.md @@ -50,6 +50,29 @@ Hover over the links below to see tooltips: </p> </div> +### Custom tooltips + +<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small> + +You can customize the appearance of tooltips using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-tooltip"` to scope our custom appearance and use it to override a local CSS variable. + +```scss +.custom-tooltip { + --bs-tooltip-bg: var(--bs-primary); +} +``` + +{{< example class="tooltip-demo" >}} +<button type="button" class="btn btn-secondary" + data-bs-toggle="tooltip" data-bs-placement="top" + data-bs-custom-class="custom-tooltip" + title="This top tooltip is themed via CSS variables."> + Custom tooltip +</button> +{{< /example >}} + +### Directions + Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL. <div class="bd-example tooltip-demo"> |