aboutsummaryrefslogtreecommitdiff
path: root/docs/4.0/components/tooltips.md
diff options
context:
space:
mode:
authorm5o <[email protected]>2018-01-16 00:49:36 +0200
committerXhmikosR <[email protected]>2018-03-12 21:50:21 +0200
commitb5e6eb22a6da98c489c00e6266daa4599e3ce097 (patch)
treeca46ac63204c54c0e6c63a78f33f2a2262d82ac3 /docs/4.0/components/tooltips.md
parent7b2427cc6b790b2b66dee32ba55b8fa694b789e2 (diff)
downloadbootstrap-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.md13
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)`