diff options
| author | m5o <[email protected]> | 2018-01-16 00:49:36 +0200 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2018-03-12 21:50:21 +0200 |
| commit | b5e6eb22a6da98c489c00e6266daa4599e3ce097 (patch) | |
| tree | ca46ac63204c54c0e6c63a78f33f2a2262d82ac3 /docs/4.0/components/tooltips.md | |
| parent | 7b2427cc6b790b2b66dee32ba55b8fa694b789e2 (diff) | |
| download | bootstrap-b5e6eb22a6da98c489c00e6266daa4599e3ce097.tar.xz bootstrap-b5e6eb22a6da98c489c00e6266daa4599e3ce097.zip | |
Use callout without custom Jekyll plugin.
Diffstat (limited to 'docs/4.0/components/tooltips.md')
| -rw-r--r-- | docs/4.0/components/tooltips.md | 13 |
1 files changed, 7 insertions, 6 deletions
diff --git a/docs/4.0/components/tooltips.md b/docs/4.0/components/tooltips.md index a055d9519..e30dff3b7 100644 --- a/docs/4.0/components/tooltips.md +++ b/docs/4.0/components/tooltips.md @@ -90,13 +90,14 @@ $('#example').tooltip(options) 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 %} +{% capture callout %} ##### 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. In addition, 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. -{% endcallout %} +{% endcapture %} +{% include callout.html content=callout type="warning" %} {% highlight html %} <!-- HTML to write --> @@ -238,16 +239,16 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap </tbody> </table> -{% callout info %} +{% capture callout %} #### Data attributes for individual tooltips Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above. -{% endcallout %} +{% endcapture %} +{% include callout.html content=callout type="info" %} ### Methods -{% capture callout-include %}{% include callout-danger-async-methods.md %}{% endcapture %} -{{ callout-include | markdownify }} +{% include callout-danger-async-methods.md %} #### `$().tooltip(options)` |
