Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Placement is not working #1233

Open
eduramme opened this issue Nov 19, 2024 · 1 comment
Open

[BUG] Placement is not working #1233

eduramme opened this issue Nov 19, 2024 · 1 comment
Labels

Comments

@eduramme
Copy link

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

image

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: #692

@eduramme eduramme added the Bug label Nov 19, 2024
@AntennaeVY
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants