[BUG] Tooltip zindex incorrect on overlapping sliders

[ColinGeukes]

Thanks for helping with the previous bug I had, no I have another small visual bug with the sliders and their tooltips

Context

dash                       4.0.0

• OS: macOS
• Browser Chrome
• Version 145.0.7632.45

Describe the bug
The tooltip is placed under the next slider

Expected behavior
The tooltip should be placed on top of the next slider

Reproducing code

from dash import Dash, dcc, html

app = Dash(__name__)

app.layout = html.Div(
    children=[
        dcc.Slider(0, 100, 1, value=10, id="my-slider", tooltip={"placement": "bottom", "always_visible": True}),
        dcc.Slider(0, 20, 5, value=10, id="my-slider2", tooltip={"placement": "bottom", "always_visible": True}),
    ]
)

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

Thanks again for the amazing work ❤️

[AnnMarieW]

@ColinGeukes
Personally, I would just add some top margin to the slider to give room for the tooltip - especially if set to always_visible=True

Here's some CSS that will make the tootip visible when it's focused:

.dash-slider-root:hover,
.dash-slider-root:focus-within {
    z-index: 999;
}