2

I'm using Tippy.js with an embedded HTML form, which is relatively large. My problem is that when I click the trigger object that is too close to the top of the browser window, the popper gets cut off.

Tippy has an offset attribute that looks like what I need and is supposed to move the popper on the X and Y axis's, but it won't move on the Y axis, only the X.

I've tried moving the position of the popper using the placement attribute and the offset using the offset attribute but I can't figure it out.

These are examples of what it should look like and what it does look like.

enter image description here

enter image description here

Shawn
  • 3,031
  • 4
  • 26
  • 53

1 Answers1

3

the solution was to add "popperOptions" to the tippy initialization 

 popperOptions: {
    modifiers: {
      preventOverflow: {
        enabled: false
      }
    }
  }

full init might look like:

tippy('.mySelector', {
  appendTo: document.querySelector('.mySelector').parentNode,
  popperOptions: {
    modifiers: {
      preventOverflow: {
        enabled: false
      },
      hide: {
        enabled: false
      }
    }
  }
})

enter image description here

Shawn
  • 3,031
  • 4
  • 26
  • 53
  • It looks like the solution was to add `preventOverflow`, not just adding `popperOptions`, right? – Anthony Apr 17 '18 at 15:52
  • Ultimately, yes though I had to add popperOptions to use preventoverFlow, afaik. – Shawn Apr 17 '18 at 16:29
  • Though it works, I also get `preventOverflow modifier is required by hide modifier in order to work, be sure to include it before hide! ` in the console every time I invoke tippy. – Shawn Apr 17 '18 at 16:31