CODEWITHSUNDEEP
htmlcss
nyphur
nyphur

Reputation: 2896

Prevent height from cutting off hover content

In React, I have a container that has a fixed height and a tooltip component that makes another div appear once it's hovered. However, The fixed height is currently cutting it off:

enter image description here

The tooltip is positioned absolutely as well:

enter image description here

if I remove the height, then everything just collapses. I'm also unable to increase the height of this component further, unfortunately. Are there any alternatives around this?

Upvotes: 0

Views: 670

Answers (1)

Omagerio
Omagerio

Reputation: 505

Without the relevant code, I can only make two guesses:

1. The container is cropping the content

In this case you should try setting the overflow to allow extending over boundaries. Try setting overflow: visible to the container.

2. The subsequent container is being placed over the tooltip:

In this case you should try setting a css z-index to the tooltip and the subsequent container, in order to reposition the tooltip over the container. Something like this:

.tooltip{
 position:absolute;
 z-index:2;
}

.subsequentContainer{
position:relative;
z-index:1;
}

Upvotes: 1

Related Questions