Tooltip improperly positioned on initial render #1148
Description
Before opening:
Please fill out the below information as much as possible.
- dash version:
#3.2.0 - dash-bootstrap-components version:
#2.0.4 - components affected by bug: Tooltip
What is happening?
When the Tooltip is rendered inside a layout where its target is inside a container with CSS properties such as backdrop-filter, transform or other stacking/translation contexts, the tooltip on first appearance is briefly rendered at an incorrect position (often top-left or offset) and then jumps to the correct position once the layout stabilises. This causes visual “jitter” or “drift” on page load or when the container’s layout changes.
What should be happening?
The Tooltip should appear once, directly at the correct position relative to its target, without any visible jump or repositioning. The presence of transform/backdrop-filter or similar CSS should not cause initial mis-positioning.
Code
import dash
from dash import html, dcc, Input, Output
import dash_bootstrap_components as dbc
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div([
html.Div(
style={
'backdrop-filter': 'blur(8px) saturate(120%)',
'padding': '50px',
'border': '1px solid #ccc'
},
children=[
dbc.Button("Hover me", id="btn-hover", size="sm"),
dbc.Tooltip(
"Tooltip text",
target="btn-hover",
placement="top",
fade=False,
delay={'show': 200, 'hide': 0}
)
]
)
])
if __name__ == '__main__':
app.run(debug=True)
Error messages
No explicit error in console. The behaviour is visual repositioning (“jump”), no exception.