kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Add examples of disabled tooltip and popover triggers

Browse source
This commit is contained in:
Mark Otto 2017-12-27 17:07:58 -08:00 committed by Mark Otto
parent dd621e5511
commit 3e0dd5a5d7
2 changed files with 23 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
docs/4.0/components/popovers.md
View file

@ -111,6 +111,17 @@ $('.popover-dismiss').popover({
})
{% endhighlight %}
### Disabled elements
Elements with the `disabled` attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper `<div>` or `<span>` and override the `pointer-events` on the disabled element.
For disabled popover triggers, you may also prefer `data-trigger="hover"` so that the popover appears as immediate visual feedback to your users as they may not expect to _click_ on a disabled element.
{% example html %}
<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
{% endexample %}
## Usage

12
docs/4.0/components/tooltips.md
View file

@ -109,6 +109,18 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo
</div>
{% endhighlight %}
### Disabled elements
Elements with the `disabled` attribute aren't interactive, meaning users cannot hover or click them to trigger a tooltip (or popover). As a workaround, you'll want to trigger the tooltip from a wrapper `<div>` or `<span>` and override the `pointer-events` on the disabled element.
<div class="tooltip-demo">
{% example html %}
<span class="d-inline-block" data-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
{% endexample %}
</div>
### Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`.