URGENT: Tooltip in Popover

[StefanSeliger]

Which generators are affected?

• All
• HTML
• React
• Angular
• Vue
• Web components
• Power Apps

Reproduction case

We use a DBTooltip within a DBPopover (please find a code example under screenshots). The problem is, that the the tooltip isn't rendered in the visible part of the browser. We even got a horizontal scroll when implemented in our code. It might be related the other ticket I wrote a couple of days ago (#4451). We use the DBPopover in several places in our project and would appreciate a quick solution for this problem.

Expected Behaviour

The tooltip should be positioned within the visible part of the browser, wherever there is space to show it.

Screenshots

import {
	DBButton,
	DBCard,
	DBCheckbox,
	DBIcon,
	DBPopover,
	DBTooltip
} from '@db-ux/react-core-components';
import { useState } from 'react';

export const Test = () => {
	const [isOpen, setIsOpen] = useState(false);

	const openPop = () => {
		setIsOpen(!isOpen);
	};

	return (
		<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
			<DBPopover
				spacing="none"
				open={isOpen}
				placement="bottom-end"
				trigger={
					<DBButton
						icon="gear_wheel"
						type="button"
						noText
						variant="ghost"
						onClick={openPop}
					/>
				}
			>
				<DBCard
					spacing="none"
					style={{
						display: 'flex',
						justifyContent: 'space-between',
						alignItems: 'center'
					}}
				>
					<div>
						<DBCheckbox>Text</DBCheckbox>
						<DBIcon icon="information_circle">
							<DBTooltip width="fixed">Message</DBTooltip>
						</DBIcon>
					</div>
				</DBCard>
			</DBPopover>
		</div>
	);
};

Browser version

None

Add any other context about the problem here.

No response

[mfranzke]

@StefanSeliger even though that this isn't related to solving this position problem itself, would it be possible to change the UI in this case within your application to display the description included in the tooltip directly in the page? By having it in the tooltip it would be hidden for screenreader and keyboard users and probably even users with motor disabilities might have problems to open the tooltip in this case to get to that information.

[StefanSeliger]

For now, this is a solution we can implement. Thanks for the idea.