mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-01 09:22:55 +02:00
Code Issues Releases Wiki Activity

Fix StackBlitz Popovers and Tooltips examples (#36449)

Browse Source 
* Fix StackBlitz Popovers and Tooltips examples

* Rename shortcode example parameters

* Reorder example shortcode doc params + fix Cspell

* Remove 'stackblitz' param + use data-bs-title instead of title

* Update site/layouts/partials/callout-warning-data-bs-title-vs-title.md

Co-authored-by: Mark Otto <markd.otto@gmail.com>

Co-authored-by: Mark Otto <markd.otto@gmail.com>
This commit is contained in:
Julien Déramond
2022-06-20 16:19:47 +02:00
committed by GitHub
parent 22503d6b21
commit cfabeb71fa
10 changed files with 46 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
site/content/docs/5.2/components/popovers.md
View File

@@ -44,9 +44,13 @@ const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstra
### Live demo
We use JavaScript similar to the snippet above to render the following live popover. Titles are set via `title` attribute and body content is set via `data-bs-content`.
We use JavaScript similar to the snippet above to render the following live popover. Titles are set via `data-bs-title` and body content is set via `data-bs-content`.
{{< example js_snippet="true" >}}
{{< callout warning >}}
{{< partial "callout-warning-data-bs-title-vs-title.md" >}}
{{< /callout >}}
{{< example stackblitz_add_js="true" >}}
<button type="button" class="btn btn-lg btn-danger" 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 >}}
@@ -54,7 +58,7 @@ We use JavaScript similar to the snippet above to render the following live popo
Four options are available: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL. Set `data-bs-placement` to change the direction.
{{< example js_snippet="true" >}}
{{< example stackblitz_add_js="true" >}}
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
Popover on top
</button>
@@ -87,11 +91,11 @@ You can customize the appearance of popovers using [CSS variables](#variables).
{{< scss-docs name="custom-popovers" file="site/assets/scss/_component-examples.scss" >}}
{{< example class="custom-popover-demo" js_snippet="true" >}}
{{< example class="custom-popover-demo" stackblitz_add_js="true" >}}
<button type="button" class="btn btn-secondary"
data-bs-toggle="popover" data-bs-placement="right"
data-bs-custom-class="custom-popover"
title="Custom popover"
data-bs-title="Custom popover"
data-bs-content="This popover is themed via CSS variables.">
Custom popover
</button>
@@ -107,8 +111,8 @@ Use the `focus` trigger to dismiss popovers on the user's next click of a differ
For proper cross-browser and cross-platform behavior, you must use the `<a>` tag, _not_ the `<button>` tag, and you also must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) attribute.
{{< /callout >}}
{{< example js_snippet="true" >}}
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
{{< example stackblitz_add_js="true" >}}
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
{{< /example >}}
```js
@@ -123,7 +127,7 @@ Elements with the `disabled` attribute aren't interactive, meaning users cannot
For disabled popover triggers, you may also prefer `data-bs-trigger="hover focus"` so that the popover appears as immediate visual feedback to your users as they may not expect to _click_ on a disabled element.
{{< example js_snippet="true" >}}
{{< example stackblitz_add_js="true" >}}
<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>