search

atomiks / tippyjs

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

Content Height > Window Height causing Translate3d Y value error - cant see tooltip content #1125

Open RyanPearson opened 1 year ago

RyanPearson commented 1 year ago

Bug description

The div#tippy-1 container for tippy content is not displayed in correct position.

Something in the JS is creating inline styles which has the translate3d really far away from the target element: transform: translate3d(903.5px, -1640px, 0px);

the Y value is WAAYYY off

Reproduction

I'm sorry for sharing a video, but the codepen seems to work fine which is infuriating.

I'm having issues on my site with the SIMPLEST recreation (my html/css/js is simpler than codepens). Code below: (it's just divs w/ height to make the content taller than the screen)

Video explanation: https://www.loom.com/share/d90dbad110444f01aff7fb5cb39e4b86 

<html>
<body>
<main style="display:flex;flex-direction:column;gap:20px;">
    <div style="height:300px;background-color:red;width:200px;"></div>
    <button class="tippy-target">test</button>
    <div style="height:300px;background-color:red;width:200px;"></div>
    <div style="height:300px;background-color:red;width:200px;"></div>
    <div style="height:300px;background-color:red;width:200px;"></div>
    <div style="height:300px;background-color:red;width:200px;"></div>
    <div style="height:300px;background-color:red;width:200px;"></div>
</main>

<script src="https://unpkg.com/@popperjs/core@2"></script> 
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
tippy('.tippy-target', {
  content: "I'm a Tippy tooltip!",
});
</script>
</body>
</html>
RyanPearson commented 1 year ago

I found that the cause of this issue was that I was using a wordpress template and there was php code on lines before: <!DOCTYPE html> at the very top

simply moving this line of code to the top of the header.php file (above the php code) fixed the error.

really weird error because of course upon rendering from server <!DOCTYPE html> was still at the top. . . so the DOM was the same. . .

ivandimovd commented 1 year ago

I can confirm that adding !DOCTYPE html on the top fixed the issue, but it's really strange why missing it is breaking the position. I'm using it in a plain html/js page.