3

Ref: https://atomiks.github.io/tippyjs/

The z-index seems not be working when specifying interactive:true (then it falls behind other elements) although I specify the #main_container. How can I get it "on front of everything" with interactive:true?

delegate( '#main_container', {
target: '[data-tippy-content]', allowHTML: true, 
interactive: true, placement: 'right', theme: 'light', zIndex: 99999
} );

see also here: https://github.com/projectje/bookmark for the above code. I made a temporary workaround by placing a BR behind every first character so that it will not flow over other boxes. But this is really a short-term workaround.

edelwater
  • 2,650
  • 8
  • 39
  • 67
  • Did you specify `z-index` as `zIndex` (with capital I)? See docs (at bottom): https://atomiks.github.io/tippyjs/v5/all-props/ – Roy Jun 16 '20 at 09:49
  • i changed it to zIndex but it does not seem to make a difference – edelwater Jun 16 '20 at 09:56

1 Answers1

6

The tippy is appended to the reference element's parent by default when interactive — this can cause it to be clipped if the parent is a "containing block".

To fix use one of these:

  • Use popperOptions: { strategy: 'fixed' }, or
  • Specify appendTo: document.body + focus management for keyboard usage
atomiks
  • 684
  • 6
  • 11