Slider tooltip remains in fixed position on scroll

[ndrezn]

Tooltips remain in a fixed position on scrollable pages where the outer style is {"height": "100vh", "overflow": "auto"}. Behaviour occurs regardless of the browser being used.

It's possible other style settings cause this behaviour as well, but this is the style setting which caused the error for me. In this example, removing the styling does not change the look of the app, but it is possible that a height/overflow setting is important for the look of an app and the slider is nested inside of other components.

Minimal example

import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
server = app.server

app.layout = html.Div(
    children=[
        dbc.Card("This is a card", style={"padding": "100px"}),
        dcc.RangeSlider(
            min=0,
            max=1,
            value=[0, 1],
            step=0.01,
            tooltip=dict(always_visible=True, placement="bottom"),
        ),
        # Note that these cards exist only to make the page scrollable
        dbc.Col(
            [
                dbc.Row(
                    [dbc.Card("This is another card", style={"padding": "100px"})] * 3,
                )
            ]
            * 10
        ),
    ],
    # These styles seem to cause the problem, when these styles are removed the error does not occur
    style={
        "height": "100vh",
        "overflow": "auto",
    },
)


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

Requirements

dash==1.17.0
dash-bootstrap-components==0.10.7
dash-core-components==1.13.0
dash-html-components==1.1.1

Screen recording

[mtwichan]

@christopherjeon @ndrezn any updates?

[ndrezn]

I don't think there are any updates on this issue