Tooltip hidden behind elements problems usually happen when the tooltip is clipped by overflow, trapped in a stacking context, placed under a higher z-index element, or positioned relative to the wrong parent.
Tooltip Layer Fix
Why is my tooltip hidden behind other elements?
A tooltip can be coded correctly and still appear behind a card, header, image, dropdown, modal, or nearby section. The problem is rarely the text itself. It is usually a layout-layer problem: overflow:hidden, low z-index, stacking context, transformed parents, or a tooltip that is positioned inside the wrong container.
- Tooltip z-index
- Overflow clipping
- Stacking context
- Position absolute
What the bug looks like
The tooltip appears cut in half, shows under a card, disappears behind a header, or cannot escape its container.
Why it happens
Tooltips are floating UI, but they are often placed inside normal layout containers that clip or trap them.
What usually fixes it
Remove clipping from the parent, raise the tooltip layer, avoid stacking traps, or render the tooltip in a safer page-level layer.
The tooltip is clipped by overflow:hidden
This is one of the most common tooltip bugs. The card needs rounded corners or image cropping, so it uses overflow:hidden. But the tooltip also lives inside that card, so the parent cuts it off.
Broken code
Parent clips tooltip.card {
position: relative;
overflow: hidden;
}
.tooltip {
position: absolute;
bottom: 100%;
z-index: 20;
}Broken visual result
The tooltip is inside a parent that clips anything outside the card.
Info This tooltip needs to escape the card, but overflow cuts it.Correct code
Visible floating area.card {
position: relative;
overflow: visible;
}
.tooltip {
position: absolute;
bottom: calc(100% + 8px);
z-index: 20;
}Fixed visual result
The tooltip can float outside the card because the parent no longer clips it.
Info This tooltip can now appear above the card.The tooltip has a lower z-index than nearby content
If the tooltip is not clipped but still appears behind another card, header, image, or panel, the problem is layer order. The tooltip needs to be above the nearby interactive content.
Broken code
Low tooltip layer.tooltip {
position: absolute;
z-index: 2;
}
.feature-card {
position: relative;
z-index: 10;
}Broken visual result
The tooltip is visible, but another content layer overlaps it.
Info Low z-index tooltip hidden by a card.Correct code
Tooltip layer wins.tooltip {
position: absolute;
z-index: 100;
}
.feature-card {
position: relative;
z-index: 1;
}Fixed visual result
The tooltip has a deliberate layer above nearby cards.
Info Tooltip layer is now above the card.A transformed parent creates a stacking context trap
A tooltip can have z-index:9999 and still lose if it is inside a parent stacking context. Common triggers include transform, filter, opacity, isolation, and positioned parents with z-index.
Broken code
Tooltip trapped.card {
transform: translateZ(0);
z-index: 1;
}
.card .tooltip {
position: absolute;
z-index: 9999;
}Broken visual result
The tooltip is inside a lower stacking context.
Info Even z-index 9999 cannot escape this parent.Correct code
Move tooltip to safe layer<body>
<main class="page">...</main>
<div class="tooltip-layer">...</div>
</body>Fixed visual result
The component can stay transformed.
InfoThe tooltip is positioned relative to the wrong parent
position:absolute uses the nearest positioned ancestor. If the trigger is inside one element but the tooltip is positioned relative to another, the tooltip can appear in the wrong place and hide behind unrelated content.
Broken code
No local anchor.tooltip-wrap {
/* missing position: relative */
}
.tooltip {
position: absolute;
bottom: 100%;
left: 0;
}Broken visual result
The trigger is here, but the tooltip is not anchored locally.
InfoCorrect code
Local tooltip anchor.tooltip-wrap {
position: relative;
display: inline-flex;
}
.tooltip {
position: absolute;
bottom: calc(100% + 8px);
left: 0;
z-index: 100;
}Fixed visual result
The tooltip is positioned relative to the trigger area.
Info Tooltip is anchored to the right local parent.A production-minded tooltip layer pattern
A stronger tooltip system separates normal layout from floating UI. Simple tooltips can use a local relative wrapper, but complex tooltips should use a dedicated high-level layer so cards, grids, overflow, and transforms do not trap them.
Premium code
Safe tooltip system:root {
--layer-tooltip: 1000;
}
.tooltip-anchor {
position: relative;
display: inline-flex;
}
.tooltip {
position: absolute;
left: 50%;
bottom: calc(100% + 10px);
z-index: var(--layer-tooltip);
transform: translateX(-50%);
max-width: min(260px, calc(100vw - 32px));
}
.card-media {
overflow: hidden;
}
.card-body {
overflow: visible;
}/* For complex apps */
.tooltip-layer {
position: fixed;
inset: 0;
z-index: var(--layer-tooltip);
pointer-events: none;
}
.tooltip-layer .tooltip {
position: absolute;
pointer-events: auto;
}Premium visual result
The card layout stays clean, and the tooltip has a predictable layer.
InfoFast practical rule
If a tooltip is hidden behind other elements, do not only increase z-index. First check whether the parent is clipping the tooltip with overflow:hidden. Then check stacking context, positioned ancestors, and whether the tooltip should live in a higher page-level layer.
Debug checklist
- Inspect the tooltip and confirm it has a real position, usually
position:absoluteorposition:fixed. - Check the parent container for
overflow:hidden,overflow:auto, oroverflow:clip. - Temporarily set the parent to
overflow:visibleto see if clipping is the cause. - Compare the tooltip z-index with nearby cards, headers, overlays, and dropdowns.
- Look for stacking context creators like
transform,filter,opacity,isolation, and positioned parents. - Make sure the tooltip is positioned relative to the intended wrapper.
- Avoid placing app-level floating UI inside cards, sliders, or overflow-heavy layout wrappers.
- Use a simple layer scale for tooltip, dropdown, header, modal, and overlay values.
overflow:hidden for rounded corners and accidentally clips the tooltip.
Final takeaway
A tooltip hidden behind other elements is usually a layer and containment problem, not a text problem. The tooltip may be clipped by overflow, trapped in a stacking context, placed under another z-index layer, or positioned relative to the wrong parent.
Start with overflow, then inspect stacking context, then fix the tooltip’s layer strategy. For simple UI, a local relative wrapper can work. For complex UI, a dedicated tooltip layer is safer and easier to debug.
