This repository has been archived by the owner on Jun 3, 2024. It is now read-only.
This repository has been archived by the owner on Jun 3, 2024. It is now read-only.
Closed
Description
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
