Tippyjs: Unable to programatically show Tippy tooltip relative to text in scroll pane.

[JoshLefebvre]

I currently have an application that has a left pane, a center pane, and a right pane. My left and right pane have static heights while my center pane is used for long documents and uses y-overflow: scroll

I am trying to programatically have tippy tooltips show on page load for certain elements in my long document in the center pane using the .show() function. However whenever the tooltip is outside of the current view port (somewhere down the center scroll pane) the tooltip jsut shows at the bottom of the current viewport. It's only once I scroll down on the page that the tooltip aligns with the element it's attached to. I ran into the exact same problem using bootstrap's tooltip as well. At least with bootstrap tooltips I was able to modify the absolute positioning of the tooltip to position the tooltip next to the element. Not sure if this is possible with tippy.js?

Here is a jsfiddle demonstrating the problem: https://jsfiddle.net/L3jv4a9w/4/
As you can see the tooltip text is being dispalyed at the bottom of the viewport even though this element is not actually visible? Is this a limitation of the library?

[atomiks]

The problem here is that Popper.js (the positioning engine of the tooltips in this library – which is also what Bootstrap 4 Beta 1 now uses) is preventing viewport overflow of the tooltip popper so you can see it at the bottom. In addition, the tooltip is appended to the body so you can see it "overflow" the scrollable div there.

The solution here is to disable preventOverflow in popperOptions, and specify a flipDuration of 0 so you don't get the transition side-effect which exists by default (for smooth flipping), AND append it to the scrollable div container so you can't see it overflow.

const tip = tippy('.root2', {
  flipDuration: 0,
  appendTo: document.querySelector('.center-pane'),
  popperOptions: {
    modifiers: {
      preventOverflow: {
        enabled: false
      }
    }
  }
})

https://jsfiddle.net/L3jv4a9w/5/

[JoshLefebvre]

Thanks @atomiks this works! In my actual example I'm actually triggering the tooltip to show through a button somewhere in my right pane so took me a while to realize that I needed to set 'hideOnClick' to false to disable the default hide on click trigger.