make sure tooltips aren't visible when parent slider isn't

CHANGELOG.md

@@ -7,6 +7,8 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - [#871](https://github.com/plotly/dash-core-components/pull/871) Add Julia syntax highlighting support for dcc.Markdown
 
 ## Updated
+- [#878](https://github.com/plotly/dash-core-components/pull/878)
+  - Fixed [#751](https://github.com/plotly/dash-core-components/issues/751), a bug that causes `dcc.Slider` and `dcc.RangerSlider` tooltips to be visible even if the slider component isn't visible (e.g. overflow),
 - [#875](https://github.com/plotly/dash-core-components/pull/875)
   - Upgraded Plotly.js to [1.57.1](https://github.com/plotly/plotly.js/releases/tag/v1.57.1)
     - Patch release [1.57.1](https://github.com/plotly/plotly.js/releases/tag/v1.57.1)

src/fragments/Slider.react.js

@@ -97,7 +97,15 @@ export default class Slider extends Component {
                             setProps({value});
                         }
                     }}
-                    tipProps={tipProps}
+                    /*
+                    if/when rc-slider or rc-tooltip are updated to latest versions,
+                    we will need to revisit this code as the getTooltipContainer function will need to be a prop instead of a nested property
+                    */
+                    tipProps={{
+                        ...tipProps,
+                        getTooltipContainer: node => node,
+                    }}
+                    style={{position: 'relative'}}
                     value={value}
                     marks={truncatedMarks}
                     {...omit(

tests/integration/sliders/test_sliders.py

@@ -95,3 +95,68 @@ def test_slsl004_out_of_range_marks_rangeslider(dash_dcc):
     dash_dcc.start_server(app)
 
     assert len(dash_dcc.find_elements("span.rc-slider-mark-text")) == 6
+
+
+def test_slsl005_slider_tooltip(dash_dcc):
+    app = dash.Dash(__name__)
+    app.layout = html.Div(
+        [
+            html.Div(
+                [
+                    html.Div(
+                        dcc.Slider(
+                            min=0,
+                            max=100,
+                            value=65,
+                            tooltip={"always_visible": True, "placement": "top"},
+                        ),
+                        style=dict(height=100),
+                    ),
+                    html.Div(
+                        dcc.Slider(
+                            min=0,
+                            max=100,
+                            value=65,
+                            tooltip={"always_visible": True, "placement": "top"},
+                        ),
+                        style=dict(height=100),
+                    ),
+                    html.Div(
+                        dcc.Slider(
+                            min=0,
+                            max=100,
+                            value=65,
+                            tooltip={"always_visible": True, "placement": "top"},
+                        ),
+                        style=dict(height=100),
+                    ),
+                    html.Div(
+                        dcc.Slider(
+                            min=0,
+                            max=100,
+                            value=65,
+                            tooltip={"always_visible": True, "placement": "top"},
+                        ),
+                        style=dict(height=100),
+                    ),
+                    html.Div(
+                        dcc.Slider(
+                            id="test-slider",
+                            min=0,
+                            max=100,
+                            value=65,
+                            tooltip={"always_visible": True, "placement": "top"},
+                        ),
+                        style=dict(height=100),
+                    ),
+                ],
+                style=dict(maxHeight=300, overflowX="scroll"),
+            )
+        ]
+    )
+
+    dash_dcc.start_server(app)
+    dash_dcc.wait_for_element("#test-slider")
+    dash_dcc.percy_snapshot(
+        "slider-make sure tooltips are only visible if parent slider is visible"
+    )