diff options
Diffstat (limited to '')
| -rw-r--r-- | site/content/docs/5.3/components/tooltips.md (renamed from site/content/docs/5.2/components/tooltips.md) | 31 |
1 files changed, 12 insertions, 19 deletions
diff --git a/site/content/docs/5.2/components/tooltips.md b/site/content/docs/5.3/components/tooltips.md index a106d9d..cf628e3 100644 --- a/site/content/docs/5.2/components/tooltips.md +++ b/site/content/docs/5.3/components/tooltips.md @@ -23,11 +23,11 @@ Things to know when using the tooltip plugin: Got all that? Great, let's see how they work with some examples. {{< callout info >}} -{{< partial "callout-info-sanitizer.md" >}} +{{< partial "callouts/info-sanitizer.md" >}} {{< /callout >}} {{< callout info >}} -{{< partial "callout-info-prefersreducedmotion.md" >}} +{{< partial "callouts/info-prefersreducedmotion.md" >}} {{< /callout >}} ## Examples @@ -46,12 +46,11 @@ const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstra Hover over the links below to see tooltips: {{< example class="tooltip-demo" stackblitz_add_js="true" >}} -<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project. -</p> +<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.</p> {{< /example >}} {{< callout warning >}} -{{< partial "callout-warning-data-bs-title-vs-title.md" >}} +{{< partial "callouts/warning-data-bs-title-vs-title.md" >}} {{< /callout >}} ### Custom tooltips @@ -136,9 +135,7 @@ As part of Bootstrap’s evolving CSS variables approach, tooltips now use local ## Usage -The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. - -Trigger the tooltip via JavaScript: +The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. Trigger the tooltip via JavaScript: ```js const exampleEl = document.getElementById('example') @@ -146,9 +143,7 @@ const tooltip = new bootstrap.Tooltip(exampleEl, options) ``` {{< callout warning >}} -##### Overflow `auto` and `scroll` - -Tooltip position attempts to automatically change when a **parent container** has `overflow: auto` or `overflow: scroll` like our `.table-responsive`, but still keeps the original placement's positioning. To resolve this, set the [`boundary` option](https://popper.js.org/docs/v2/modifiers/flip/#boundary) (for the flip modifier using the `popperConfig` option) to any HTMLElement to override the default value, `'clippingParents'`, such as `document.body`: +Tooltips automatically attempt to change positions when a parent container has `overflow: auto` or `overflow: scroll`, but still keeps the original placement's positioning. Set the [`boundary` option](https://popper.js.org/docs/v2/modifiers/flip/#boundary) (for the flip modifier using the `popperConfig` option) to any HTMLElement to override the default value, `'clippingParents'`, such as `document.body`: ```js const tooltip = new bootstrap.Tooltip('#example', { @@ -162,9 +157,7 @@ const tooltip = new bootstrap.Tooltip('#example', { The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin). {{< callout warning >}} -##### Making tooltips work for keyboard and assistive technology users - -You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as `<span>`s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the tooltip in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltip, as this will make your tooltips impossible to trigger for keyboard users. +**Keep tooltips accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex="0"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce tooltips in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltips as this will make theme impossible to trigger for keyboard users. {{< /callout >}} ```html @@ -221,7 +214,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt | `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. | | `selector` | string, false | `false` | If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to also apply tooltips to dynamically added DOM elements (`jQuery.on` support). See [this issue]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. | | `template` | string | `'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'` | Base HTML to use when creating the tooltip. The tooltip's `title` will be injected into the `.tooltip-inner`. `.tooltip-arrow` will become the tooltip's arrow. The outermost wrapper element should have the `.tooltip` class and `role="tooltip"`. | -| `title` | string, element, function | `''` | Default title value if `title` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. | +| `title` | string, element, function | `''` | The tooltip title. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. | | `trigger` | string | `'hover focus'` | How tooltip is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the tooltip will be triggered programmatically via the `.tooltip('show')`, `.tooltip('hide')` and `.tooltip('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. | {{< /bs-table >}} @@ -246,7 +239,7 @@ const tooltip = new bootstrap.Tooltip(element, { ### Methods {{< callout danger >}} -{{< partial "callout-danger-async-methods.md" >}} +{{< partial "callouts/danger-async-methods.md" >}} {{< /callout >}} {{< bs-table "table" >}} @@ -274,7 +267,7 @@ tooltip.setContent({ '.tooltip-inner': 'another title' }) ``` {{< callout info >}} -The `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the popover template, and each related property-value can be `string` | `element` | `function` | `null` +The `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the tooltip template, and each related property-value can be `string` | `element` | `function` | `null` {{< /callout >}} ### Events @@ -283,10 +276,10 @@ The `setContent` method accepts an `object` argument, where each property-key is | Event | Description | | --- | --- | | `hide.bs.tooltip` | This event is fired immediately when the `hide` instance method has been called. | -| `hidden.bs.tooltip` | This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). | +| `hidden.bs.tooltip` | This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete). | | `inserted.bs.tooltip` | This event is fired after the `show.bs.tooltip` event when the tooltip template has been added to the DOM. | | `show.bs.tooltip` | This event fires immediately when the `show` instance method is called. | -| `shown.bs.tooltip` | This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). | +| `shown.bs.tooltip` | This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete). | {{< /bs-table >}} ```js |