Tooltip is behind Popover
MrToph opened this issue · 2 comments
MrToph commented
Describe the bug
I'm using a Tooltip inside a Popover component and the Tooltip is behind the Popover.
Not sure if this is intended - imo, tooltips should have the highest z-index.
To Reproduce
<Popover.State placement="bottom-start" gutter={16}>
<Popover.Disclosure use={Button}>Click me</Popover.Disclosure>
<Popover showCloseButton title="Hello">
<Text.Block color="gray700" fontSize="100">
Some information
<Tooltip content="Will appear behind Popup" use="span">
<Icon marginLeft="minor-1" icon="solid-info-circle" />
</Tooltip>
</Text.Block>
</Popover>
</Popover.State>;
Quick fix
I was able to fix this by overwriting the Tooltip's z-index in theme.ts
const theme = {
Tooltip: {
Content: {
styles: {
base: {
// needs to be a string or it won't work
zIndex: `99999999`,
},
},
},
},
};
jxom commented
Ah yes – this is definitely a bug. Will have a look into it.
jxom commented
This should be fixed on 1.3.9