Tooltip is not changing z-index

[samuelndm]

It has a inline style of z-index: 10 that is overlapping the z-index class

[samuelndm]

I added this to the global css file and it worked

div[id*='evergreen-tooltip'] {
  z-index: 300 !important;
}

[brandongregoryscott]

Hmmm, yeah - that's probably coming from the Positioner component we are using to calculate the Tooltip's position:

evergreen/src/tooltip/src/Tooltip.js

Lines 130 to 137 in 243d751

	<Positioner target={renderTarget} isShown={shown} position={position} animationDuration={160}>
	{({ css, getRef, state, style }) => (
	<TooltipStateless
	id={id}
	appearance={appearance}
	ref={getRef}
	data-state={state}
	style={style}

evergreen/src/positioner/src/Positioner.js

Line 159 in 243d751

<Stack value={StackingOrder.POSITIONER}>

evergreen/src/constants/src/StackingOrder.js

Lines 16 to 19 in 243d751

	/**
	* Used as the default for the Positioner.
	*/
	POSITIONER: 10,

I don't think this is really a use-case we've accounted for (overriding the default z-index for a Tooltip, or really any internal component that's leveraging the Positioner - it's supposed to be smart enough so that you don't need to manage your own z-index calculations.) What issue are you running into that requires such a drastic z-index shift?

[samuelndm]

@brandongregoryscott I'm sorry for not responding you soon.

The header and footer is overlapping the tooltip. The popover is having the same problem, there is a inline-style overriding the z-index.

[samuelndm]

This is how I'm trying to change the z-index

Popover

Tooltip

[brandongregoryscott]

Hey @samuelndm, sorry for the delay here. The Tooltip leverages our Positioner utility component which has a static z-index set for a handful of components, and doesn't really read from the theme values. Being able to override this in the theme would require some internal restructuring to support. Going to mark this as low priority for now unless others feel very passionately about this feature.