From 591725e8386c30b54e8aca258247c83811f628d8 Mon Sep 17 00:00:00 2001 From: Simon Podlipsky Date: Tue, 10 Jul 2018 14:54:45 +0300 Subject: [PATCH 1/4] Document tooltip flickering in combination with some overflow settings --- docs/4.1/components/tooltips.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/docs/4.1/components/tooltips.md b/docs/4.1/components/tooltips.md index 90bcc15ce6..6e375feba9 100644 --- a/docs/4.1/components/tooltips.md +++ b/docs/4.1/components/tooltips.md @@ -86,6 +86,18 @@ Trigger the tooltip via JavaScript: $('#example').tooltip(options) {% 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 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). From e9ec13e974d2263bb337fee95388488cefb33a18 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 10 Jul 2018 23:26:30 +0300 Subject: [PATCH 2/4] Update tooltips.md --- docs/4.1/components/tooltips.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/4.1/components/tooltips.md b/docs/4.1/components/tooltips.md index 6e375feba9..441aac4203 100644 --- a/docs/4.1/components/tooltips.md +++ b/docs/4.1/components/tooltips.md @@ -88,9 +88,10 @@ $('#example').tooltip(options) {% 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'` +When the parent container has the CSS property `overflow` set to values `auto` or `scroll` (for example when used within `.table-responsive`) the tooltip has weird flickering behaviour. + +The solution is to set the `boundary` option to anything other than default value `'scrollParent'`. For example, set it to `'window'`: {% highlight js %} $('#example').tooltip({ boundary: 'window' }) From da56d918ac74c26e3dfe30f6f4052cbff0b18fb3 Mon Sep 17 00:00:00 2001 From: Simon Podlipsky Date: Thu, 12 Jul 2018 17:31:20 +0300 Subject: [PATCH 3/4] Reword --- docs/4.1/components/tooltips.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/4.1/components/tooltips.md b/docs/4.1/components/tooltips.md index 441aac4203..d58dc81711 100644 --- a/docs/4.1/components/tooltips.md +++ b/docs/4.1/components/tooltips.md @@ -89,7 +89,7 @@ $('#example').tooltip(options) {% capture callout %} ##### Usage with overflow `auto` and `scroll` -When the parent container has the CSS property `overflow` set to values `auto` or `scroll` (for example when used within `.table-responsive`) the tooltip has weird flickering behaviour. +When the parent container has the CSS property `overflow` set to values `auto` or `scroll` (for example when used within `.table-responsive`) the tooltip's placement changes to `bottom` but still keeps original placement's positioning. The solution is to set the `boundary` option to anything other than default value `'scrollParent'`. For example, set it to `'window'`: From a4b2e39178c51695915197191eeeefe579be0720 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Jul 2018 22:27:36 -0700 Subject: [PATCH 4/4] More wordsmithing --- docs/4.1/components/tooltips.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/docs/4.1/components/tooltips.md b/docs/4.1/components/tooltips.md index d58dc81711..05e63f3cfa 100644 --- a/docs/4.1/components/tooltips.md +++ b/docs/4.1/components/tooltips.md @@ -87,11 +87,9 @@ $('#example').tooltip(options) {% endhighlight %} {% capture callout %} -##### Usage with overflow `auto` and `scroll` +##### Overflow `auto` and `scroll` -When the parent container has the CSS property `overflow` set to values `auto` or `scroll` (for example when used within `.table-responsive`) the tooltip's placement changes to `bottom` but still keeps original placement's positioning. - -The solution is to set the `boundary` option to anything other than default value `'scrollParent'`. For example, set it to `'window'`: +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, set the `boundary` option to anything other than default value, `'scrollParent'`, such as `'window'`: {% highlight js %} $('#example').tooltip({ boundary: 'window' })