Tooltip causes overflow until first shown #5545
Description
Which generators are affected?
- All
- HTML
- React
- Angular
- Vue
- Web components
- Power Apps
Reproduction case
Horizontal overflow, until you hover over "Ein Inhalt am Rand", then the overflow is gone (even after the tooltip disappears again)
<div class="db-page" data-variant="fixed">
<main class="db-main">
<db-stack direction="row" justifyContent="end" alignment="start">
<div>
Ein Inhalt am Rand
<db-tooltip placement="bottom">
Ein Tooltip mit einem Wort das länger ist als der Inhalt, z.b. Donauschifffahrtskapitän.
</db-tooltip>
</div>
</db-stack>
</main>
</div>Expected Behaviour
No overflow
Screenshots
Tooltip never shown:
Tooltip shown at least once:
Browser version
Edge
Add any other context about the problem here.
Tested in Angular, but probably affects all versions.
This seems to happen because position: fixed is only set once you've hovered for the first time, until then it uses position: absolute and is therefore not (necessarily) positioned relative to the page but to some arbitrary container up the tree.
Which DB business unit do you work for?
DB Systel GmbH (please name your customer below)
”DB Systel” please enter your customer / ”other” please enter your area or business unit.
FV
What project are you working on?
No response