KPC
Kevin Powell - Community•5w ago
noob

z-index does not work

Hi guys, I'm facing a problem related to z-index. I have a table where the first column has a sticky position, and inside the cells of the first column, I'm using a tooltip component from flowbite-react. However, I'm not sure why the first tooltip in the first cell is placed below the second cell, even though I try to add a higher z-index for the cell. I'd appreciate any ideas to help me fix this problem. 
<tr>
  <td className="sticky z-[1] left-0">
    <Tooltip content="Description">
      Contacts
    </Tooltip>
  </td>
  // ....
</tr> 
<tr>
  <td className="sticky z-[1] left-0">
    <Tooltip content="Description">
      Contacts
    </Tooltip>
  </td>
  // ....
</tr>
No description
10 Replies
Simon
Simon•5w ago
It's difficult to tell what is causing this without having an isolated reproduction of the html and css. Tho, does the z-[1] get converted to a valid class name? Square brackets are used for html attributes, so perhaps your index number does not get applied in the first place
noob
noobOP•5w ago
It's a tailwind custom class, so I'm quite sure it's applied. I even tried to use style inline and it still did not work
Chris Bolson
Chris Bolson•5w ago
The z-index would need to be on the Tooltip, not the td cell. However, from what I can see on the flowbite website (I have never used flowbite) tooltip has a default z-index of 10. However bear in mind that that will be within the stacking context of it's parent. As sticky position creates a new stacking context, and you have (presumably) applied the sticky class to each of the cells in the first column, possibly the subsequent column cells are stacking above the previous one. Sorry, it looks like this is not the issue. As Simon says, ideally a minimal, isolated demo would be the best way to see what is going on.
Simon
Simon•5w ago
Here's a demo of a faulty parent stacking context – https://jsfiddle.net/Lbnwc3m4/ -# all about that topic by the lovely Josh Comeau https://www.joshwcomeau.com/css/stacking-contexts/
Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
noob
noobOP•5w ago
I create a basic demo about my problem. You guys can take a look when hover on the content of the first cell
ἔρως
ἔρως•5w ago
if i were you, i would do what used to be done way back when: add the tooltip html to the body, then trigger it on an hover so, you have a global tooltip element you can still have that element thingy too but instead, you return a span that has an hover event and when the element is hovered, then you show the global tooltip or a div use display: contents on it
noob
noobOP•5w ago
Sorry, I don't really understand what you mean. Can you give me an example?
ἔρως
ἔρως•5w ago
the element you want to show is inside the <body> the tooltip one then you can position absolute it to where you want it the <tooltip> element you have should just have a div or span that has display: contents and an hover event the hover is where you position the tooltip on the screen
Simon
Simon•5w ago
I see. Yeah, properly escaping the parent like this isn't possible. You either need to set a z-index for each table-row, but always +1 the :hover one (experimental thought, https://jsfiddle.net/bmzc3ynh/) – or handle the tooltip outside of the cell, like epic mentioned – or look into anchor positioning, tho I am unsure if this is different. It works for the last few ones because they overlap previous rows.
ἔρως
ἔρως•5w ago
yeah, it works because of a miracle

Did you find this page helpful?