Checkout Extension -- Modal/overlay in tooltip not working

Retired Boards Appdev Extensions
1

I have a tool tip that includes a link. The link is supposed to show a modal when it is clicked but within the tooltip, it it is not showing the modal. Outside the tooltip, the exact same code works.

Schmidtc63_0-1711465847512.png
Schmidtc63_0-1711465847512.png740×398 21.4 KB

function createTooltipComponent(root, ui) {
	const ppmodalFragment = root.createFragment();
	const ppmodal = root.createComponent(
		Modal,
		{id: 'package-protection-info-modal', title: 'Package Protection More Info', padding: true},
		[
			root.createComponent(
				TextBlock,
				undefined,
				'More info on package protection',
			),
			root.createComponent(
				TextBlock,
				undefined,
				'More info2 on package protection',
			),
			root.createComponent(
				Button,
				{
					onPress() {
						ui.overlay.close('package-protection-info-modal');
					},
				},
				'Close',
			),
		],
	);
	ppmodalFragment.appendChild(ppmodal);
	root.appendChild(ppmodalFragment);
	const tooltipFragment = root.createFragment();
	const link = root.createComponent(
		Link,
		{
			overlay: ppmodalFragment,
			onPress: () => {
				console.log('link clicked');
			},
		},
		'More Info'
	);
	const tooltip = root.createComponent(
		Tooltip,
		{},
		[
			`We've got you covered! By opting in to our package protection, you will be ensured that your package will arrive to you in excellent condition or your money back!
KicKee's package protection covers lost, stolen or damaged packages.`,
			link
		]
	);

	tooltipFragment.appendChild(tooltip);
	const pressable = root.createComponent(
		Pressable,
		{
			overlay: tooltipFragment,
			onPress: () => console.log('onPress event'),
		},
		[
			root.createComponent(Icon, {source: 'questionFill'}),
		],
	);
	return pressable;
}

I know the link is working because I get the console.log statement. Also, if I add “to: https://google.com” to the properties of the link, it works.

How do I make the overlay work in this case?

Thank you