search

atomiks / tippyjs

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

Tooltip at bottom of long table causes page to scroll on mouseover #1172

Closed John-B closed 1 month ago

John-B commented 1 month ago

Bug description

A table has several tooltips. The tooltips near the top of the table work normally. Tooltips at the bottom of the table do not. Attempting to mouseover tooltips causes page to scroll up away from the mouse.

Reproduction

I cannot reproduce in Codepen. Bug affects Chrome with mouseover (not touch). The error can be seen in the table headed 'What we are estimating' at https://www.givewell.org/research/grants/ird-global-breastfeeding-reminders-pilot-sindh-march-2024#Why_we_made_this_grant_

I am aware there is a minor JS error in the console. Fixing the error on dev does not stop the bug. I would be grateful for any guidance as I am puzzled.

John-B commented 1 month ago

The problem seems CSS dependent, though I am unsure how. That is why I cannot reproduce in Codepen.

John-B commented 1 month ago

Feels like a Chrome bug because (a) sometimes it clears up with an overflow: hidden on the table in dev tools, but not when same CSS is in a CSS file; and (b) because I have the same problem with Drupal's default Olivero theme, which can be assumed to use correct CSS, but not with Drupal's very simple Claro theme.

John-B commented 1 month ago

This seems to fix the problem for me.

    // Append to content wrapper  #main. If we append to body or window or parent,
    // lower tippy items in a long table cause unwanted scroll up in Chrome on mouseover.
    var main = document.getElementById('main');
    tippy('.tippy', {
      appendTo: main,
      ....
    });