diff --git a/CHANGELOG.md b/CHANGELOG.md index 06410e2f9..bf24ac965 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/src/fragments/Slider.react.js b/src/fragments/Slider.react.js index 92e0f5fc1..63eda8bdc 100644 --- a/src/fragments/Slider.react.js +++ b/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( diff --git a/tests/integration/sliders/test_sliders.py b/tests/integration/sliders/test_sliders.py index 17663dcdb..a5483e093 100644 --- a/tests/integration/sliders/test_sliders.py +++ b/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" + )