The tooltip shows underneath another component

[huy1912]

I've used the @devexpress/dx-react-scheduler for the calendar and tried to show the tooltip on each schedule. But the tooltip is shown underneath (see the below screenshot). Do you know how to fix this issue?

Thanks & regards, Huy

[Sir-hennihau]

@huy1912 did you fix it already? It's also happening to me

[huy1912]

@Sir-hennihau, still haven't got the issue yet. Will share if I found the workaround for it.

[Sir-hennihau]

@huy1912 I had to fix z-index property on the div that my tooltip was hidden below. i removed it's z-index property.

if you want to keep using z-indexes keep that in mind:

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).

[ShawnCockburn]

@huy1912

I also had this issue, however I figured out that I was using the component incorrectly. you haven't provided your code so I don't know if you're having the same issue, but this is what fixed it for me.

do this:

    <>
      <BiInfoSquare
      size={22}
      // place the text you want to display in the 'data-tip' 
      data-tip={text}
      // make sure 'data-for' is the same as the react tip 'id'
      data-for={key}
      />
      <ReactTooltip id={key} place="top" type="dark" effect="solid" />
    </>

don't do this:

    <>
      <BiInfoSquare
      size={22}
      data-tip
      // make sure 'data-for' is the same as the react tip 'id'
      data-for={key}
      />
      <ReactTooltip id={key} place="top" type="dark" effect="solid">
       {text}
      </ReactTooltip>
    </>

Hope this helps

[huy1912]

@huy1912

I also had this issue, however I figured out that I was using the component incorrectly. you haven't provided your code so I don't know if you're having the same issue, but this is what fixed it for me.

do this:

    <>
      <BiInfoSquare
      size={22}
      // place the text you want to display in the 'data-tip' 
      data-tip={text}
      // make sure 'data-for' is the same as the react tip 'id'
      data-for={key}
      />
      <ReactTooltip id={key} place="top" type="dark" effect="solid" />
    </>

don't do this:

    <>
      <BiInfoSquare
      size={22}
      data-tip
      // make sure 'data-for' is the same as the react tip 'id'
      data-for={key}
      />
      <ReactTooltip id={key} place="top" type="dark" effect="solid">
       {text}
      </ReactTooltip>
    </>

Hope this helps

Thanks @ ShawnCockburn, I've tried with your solution. The issue still hasn't been resolved. Not sure due to some other reason.

[huy1912]

@huy1912 I had to fix z-index property on the div that my tooltip was hidden below. i removed it's z-index property.

if you want to keep using z-indexes keep that in mind:

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).

Thanks @Sir-hennihau, I've checked the calendar item whose position is absolute but it doesn't have any z-index. Even though I forced the tooltip's z-index to 999. The issue is still the same.

[ngotrongphuc]

any update? i got the same issue, i tried to change z-index of react-tooltip to 999999 !important but it doesn't work

[allthesignals]

Also experiencing this issue (mapbox-gl). No amount of z-index: 9999 !important seems to help. No idea why.

[allthesignals]

You'll probably need to render the tooltips LAST and as siblings to the relevant components. This seemed to solve the issue for me...

[prideaux]

data-tip

This is the solution, example on an icon:

<FaRegUser data-tip="Account" data-for={"account"} />

Then before the last DIV on the page add:

<ReactTooltip id={"account"} place="top" type="dark" effect="solid" />

[farhaakram94]

You'll probably need to render the tooltips LAST and as siblings to the relevant components. This seemed to solve the issue for me...

I faced the same issue and this solution works perfectly :) Thank you

[leomiranda]

This fixes for me:

<Tooltip anchorSelect="#element" style={{ zIndex: 99 }}>