mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-20 20:00:36 +03:00
Code Activity

Document tooltip flickering in combination with some overflow settings

Browse Source
This commit is contained in:
Simon Podlipsky
2018-07-10 14:54:45 +03:00
parent abb4868626
commit 591725e838
1 changed files with 12 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/4.1/components/tooltips.md
+12
View File
@@ -86,6 +86,18 @@ Trigger the tooltip via JavaScript:
$('#example').tooltip(options) $('#example').tooltip(options)
{% endhighlight %} {% endhighlight %}
{% capture callout %}
##### Usage with overflow `auto` and `scroll`
When the parent container has CSS property `overflow` set to values `auto|scroll` (for example when used within `.table-responsive`) the tooltip has weird flickering behaviour.
The solution is to set `boundary` option to anything other than default value `'scrollParent'`. Eg. set it to `'window'`
{% highlight js %}
$('#example').tooltip({ boundary: 'window' })
{% endhighlight %}
{% endcapture %}
{% include callout.html content=callout type="warning" %}
### Markup ### Markup
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). 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).