[BUG] Placement is not working

[edulennert]

Placement is not working

Bug description The placement prop is not working correctly in height-restricted containers. When setting place="top", the tooltip appears on the right or left side instead. Using the positionStrategy prop (e.g., "fixed") doesn't resolve the issue.

Version of Package v5.26.3

To Reproduce

1. Render a tooltip inside a height-restricted container.
2. Set the place prop to "top".
3. Optionally set the positionStrategy to "fixed".
4. Observe that the tooltip does not position itself at the top as expected.

Expected behavior The tooltip should appear at the top of the target element when place="top" is set, even in height-restricted containers.

Screenshots The container has overflow-x: hidden applied and a maximum height set to 40px

code:

      <div data-tooltip-id={id}>{trigger}</div>
      <ReactTooltip
        id={id}
        clickable
        positionStrategy="fixed"
        place="top"
        opacity={1}
        delayHide={0}
        delayShow={0}
        className="!nk-z-50 !nk-bg-black !nk-rounded-[8px] !nk-p-0"
        openEvents={{ mouseenter: true, focus: true }}
        closeEvents={{ mouseleave: true, blur: true }}
        noArrow={false}
        arrowColor="black"
        {...props}
      >
        <div className="nk-relative nk-h-full nk-text-left nk-rounded-md nk-text-sm nk-font-medium nk-text-white nk-py-2 nk-px-4">
          {children}
        </div>
      </ReactTooltip>

Desktop (please complete the following information if possible or delete this section):

• OS: Mac
• Browser: Chrome
• Frameworks React 18, Next.js 14.2.13

Additional context Even when trying the positionStrategy prop (e.g., "fixed"), the placement remains inconsistent. Adjustments or additional options to ensure correct positioning in height-restricted containers would be helpful.

I came across a similar issue that was closed without providing a proper solution: https://github.com/ReactTooltip/react-tooltip/issues/692

[AntennaeVY]

I'm experiencing the same issue right now... How have you worked around this?

[github-actions[bot]]

This issue is stale because it has not seen activity in 30 days. Remove the stale label or comment within 14 days, or it will be closed.

[gabrieljablonski]

Sorry for not responding to this when it was originally posted.

You should try placing the tooltip component outside the height restricted parent. That should work.

[tfiers]

You should try placing the tooltip component outside the height restricted parent. That should work.

(A quick way to do this: https://react.dev/reference/react-dom/createPortal)

[GwenGuts]

You should try placing the tooltip component outside the height restricted parent. That should work.

(A quick way to do this: https://react.dev/reference/react-dom/createPortal)

I confirm, with a createPortal, the placement bottom/top is kept. I use display:flex for the content of a tooltip and it was breaking the tooltip behavior

[GwenGuts]

You should try placing the tooltip component outside the height restricted parent. That should work.

(A quick way to do this: https://react.dev/reference/react-dom/createPortal)

I confirm, with a createPortal, the placement bottom/top is kept. I use display:flex for the content of a tooltip and it was breaking the tooltip behavior

Aaaaand no, after verification, it doesn't work either:

JSX:

createPortal(<Tooltip
id='button-copy-uri-tooltip'
openOnClick={true} place='bottom'
className='tooltip'>
<div className='tooltip-content'>
	<img />
	<label>URL Copied !</label>
</div>
</Tooltip>, document.body)

css:

#button-copy-uri-tooltip {
  background: var(--main-10);
}

#button-copy-uri-tooltip .tooltip-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;  
  gap: 0.8rem;
}

#button-copy-uri-tooltip img {
  width: 2rem;
  height: 2rem;
}

#button-copy-uri-tooltip img::before {
  content: '\E904';
  font-family: 'App Icons';
  font-size: 2rem;
}

[GwenGuts]

Ok, I've found out why. My tooltip was generated on the right edge on the screen, when it was too long, it shifted in a left placement. I had to set the place to 'bottom-end' and it finally works without createPortal

[github-actions[bot]]

This issue is stale because it has not seen activity in 30 days. Remove the stale label or comment within 14 days, or it will be closed.