Tippy.js z-index not working with interactivity

user_121626 0
Viewed 2422

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.

tippyjs css
1 Answers

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
user_94702780
Related