search

atomiks / tippyjs

Tooltip, popover, dropdown, and menu library
https://atomiks.github.io/tippyjs/
MIT License
11.91k stars 518 forks source link

Interactive mode pushes content down when tooltip is shown #989

Closed Estebank94 closed 2 years ago

Estebank94 commented 2 years ago

Bug description

Hello,

When adding a tooltip to an element that is nested in a span, the content after that element is pushed down when the tooltip is shown.

Reproduction

Code Pen link: https://codepen.io/estebankrmaer/pen/YzxpmRj

atomiks commented 2 years ago

Looks like it happens in Chrome, but not Firefox. It would have to do with the tippy being appended to the <span> node, but it's probably just the way the browser works in that case, not really a bug. You can append it elsewhere or there might be some CSS to workaround the issue.

Estebank94 commented 2 years ago

I can't append it elsewhere because I need to append the popup to specific words in a website so this happens very frequently. Do you have any idea for the CSS workaround?

atomiks commented 2 years ago

Append is the DOM node the tippy element is appended to, not the element it's attached near.