Skip to content
This repository has been archived by the owner on Jun 3, 2024. It is now read-only.

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

Merged
merged 6 commits into from
Oct 27, 2020
Merged

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

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3620e0e
make sure tooltips aren't visible when parent slider isn't
Oct 27, 2020
f3372f0
format
Oct 27, 2020
d45a318
add percy test
Oct 27, 2020
536a0dc
update changelog, format test, add comment for future maintainability
Oct 27, 2020
d805fad
make sure snapshot is taken of loaded DOM
Oct 27, 2020
950e383
changelog wording
Oct 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
- used the `getTooltipContainter` prop of dcc.Slider to make sure tooltips are positioned correctly when the parent slider is not visible due to it being in a HTML element with an `overflow-x` style, fixing [#751](https://github.com/plotly/dash-core-components/issues/751)
Copy link
Contributor

@Marc-Andre-Rivet Marc-Andre-Rivet Oct 27, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I missed the wrong level of details of https://github.com/plotly/dash-core-components/blame/dev/CHANGELOG.md#L26 which you are using as your baseline.

Make the entry more focused on what this fixes for the user. Something along the lines of:

Fix a bug causing the dcc.Slider and dcc.RangerSlider tooltip to be visible even if the 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)
Expand Down
10 changes: 9 additions & 1 deletion src/fragments/Slider.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
65 changes: 65 additions & 0 deletions tests/integration/sliders/test_sliders.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
)