slider tooltip.always_visible doesn't position properly

[michaelbabyn]

If I put a slider into a div that has overflow-y=scroll, then the tooltip doesn't scoll with the slider

import dash
import dash_core_components as dcc
import dash_html_components as html

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':'bottom'}
        ),
        style=dict(height=100))
    ]*5,
    style=dict(maxHeight=300, overflowX='scroll'))
])


if __name__ == '__main__':
    app.run_server(debug=True)

[wbrgss]

possible related to react-component/slider/issues/374

[alb-erandelcastillo]

Since dcc.Slider is calling the react tooltip API, what would be the correct container to set for the tooltip when using getTooltipContainer?

[wbrgss]

There is a fix here in the original/official version of this repo: ant-design/ant-design#16717. We could make a PR onto react-component/slider upstream or try to migrate dcc.Slider to the original (https://github.com/ant-design/ant-design/tree/master/components/slider) (cc @chriddyp if you were planning to take a look at this)

[wbrgss]

A short term fix would be to document around it with the suggestion here react-component/slider#374 (comment)

getTooltipContainer works as long as the slider has a parent that has position relative

[jdamiba]

I'm currently taking a look at this. This is a non-exhaustive list of some things I'm in the process of figuring out:

• what combination of css rules is leading to this?
  • the tooltips are positioned absolutely in divs that are siblings of the react-entry-point div and have the following style:

position: absolute;
top: 0px;
left: 0px;
width: 100%;

• identify a combination of css rules that lead to the desired behavior - presumably the tooltip should only be visible when parent slider is visible and the tooltip should scroll with the parent slider has the overflow=y style?
  • make sure the tooltips are relatively placed in the right place in the DOM- they should be children of the slider rc-slider element?
  • make sure they aren't visible if the parent isn't visible
• understand how this bug was fixed in the ant-design component
  • they added a getPopupContainer prop to their slider, which binds the tooltip to document.body()
• determine how to update dcc_slider to implement the desired behavior - patch dcc_slider or migrate it entirely to another implementation?
  • would this be a breaking change to the slider API? Or are the props the same? Or can we patch any difference in props?
  • is it possible to use the getTooltipContainer prop of react-component/tooltip which react-component/slider depends on to set the DOM element that the tooltip should be a child of? From: Tooltip position when scrolling a container with overflow: auto/scroll react-component/tooltip#41 (comment)

Function returning html node which will act as tooltip container. By default the tooltip attaches to the body. If you want to change the container, simply return a new element.

• could be that we need to make the same edit that the ant component made