jxom/bumbag-ui

Tooltip is behind Popover

MrToph opened this issue · 2 comments

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