The tippy.js popover seems to be getting lost amidst all the scheduled events

I recently incorporated TippyJs into my FullCalendar setup for popovers, but I'm running into layout issues that seem to be related to zIndex. The popover is getting hidden behind the event wrapper and isn't clickable. I've attached a screenshot showcasing this problem. I'd really appreciate some guidance on how to ensure that the entire popover box appears above everything else. Thank you so much for your help! https://i.sstatic.net/6oQVW.png

tippy(arg.el, {
    content: ReactDOMServer.renderToStaticMarkup(
      //my html for popover
    ),
    allowHTML: true,
    placement: 'auto',
    interactive: true,
    theme: 'light',
    zIndex: 9999,
});
htmlcssfullcalendarfullcalendar-5tippyjs

Answer №1

With tippy version 6.x, you now have the appendTo property available. You can learn more about it here. If you want to try using it, you can set it to appendTo: () => document.body

tippy(arg.el, {
content: ReactDOMServer.renderToStaticMarkup(
  //my html for popover
),
allowHTML: true,
placement: 'auto',
interactive: true,
appendTo: () => document.body,
theme: 'light',
zIndex: 9999,

Answer №2

Having encountered a similar issue, I wasn't sure if you had already found a resolution. The problem stemmed from the incorrect import of the CSS library for tippy.js and popper.

To resolve this, I simply included the CDN file in my index.html file, which instantly fixed the issue for me.

In my index.html file, I added the following files:

    <!-- Development -->
<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5"></script>

<!-- Production -->
<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js">


tippy(arg.el, {
content: ReactDOMServer.renderToStaticMarkup(
  //my html for popover
),
allowHTML: true,
placement: 'auto',
theme: 'light',
zIndex: 9999,

});

Simply removing the interactive parameters should result in normal functionality :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Toggle the operational status of the bootstrap switch

Does anyone have a solution for customizing the appearance of the Bootstrap switch button when it is disabled? I have successfully styled it for the enabled state, but it defaults to a dark appearance when disabled. I would like the disabled state to have ...

cssinputfrontendswitch-statementbootstrap-5

A useful tip for jQuery users: learn how to prevent the context menu from appearing when a text box is

Is there a way to prevent the context menu from appearing in jQuery when the text box is disabled? The right-click disable functionality works well in all browsers except for Firefox. Please note that the right-click disable functionality works when the t ...

javascriptjqueryhtmlcss

Tips for fading an image as you scroll using CSS and JavaScript?

I have been dedicating my day to mastering the art of website development. However, I am facing a challenge that is proving to be quite difficult. I am looking to create a smooth transition effect where an image gradually blurs while scrolling down, and re ...

javascripthtmljquerycss

Leveraging information from a single controller for another

I am currently developing a website using MEAN stack. I am facing an issue with passing data from one controller to the next. My goal is to transfer a selected option value to the next page. Here is the section with the select box: <div class="plumber ...

javascripthtmlangularjsmean

The enigmatic borders of a website

While working on a custom Wordpress theme, I encountered an issue where the entire body of the page was slightly pushed down. Using Chrome's inspector tool, I identified the following problematic styles: <style type="text/css" media="screen> ...

csswordpresswordpress-theming

Discovering the method for retrieving JavaScript output in Selenium

Whenever I need to run JavaScript code, the following script has been proven to work effectively: from selenium import webdriver driver=webdriver.Firefox() driver.get("https:example.com") driver.execute_script('isLogin()') However, when I atte ...

javascriptpythonhtmlfunctionselenium

Out of the DIVs floating left and right, which one is positioned first?

Is the order of <div> elements in HTML important? If it is, what is the reason behind it? .float-left{float:left;} .float-right{float:right;} <div> <div class="float-left">Left</div> <div class="float-right">Right</ ...

htmlcss

The jQuery dropdown menu smoothly expands to reveal all hidden submenu options

I'm currently encountering an issue with jQuery. I am trying to create a responsive drop-down menu with sub-menus. The behavior I want is that if the window width is less than 700px, the submenus will trigger onClick. And if the window is wider than 7 ...

javascriptjqueryhtmlcssmenu

Is there a way to arrange the navigation items to appear on the right side upon toggler click?

I've been trying to get the nav-items to align on the right side, but so far using the ms-auto class from Bootstrap isn't giving me the desired result. <html lang="en"> <head> <!-- Required meta tags --> < ...

htmlcssbootstrap-5

Ensure that everything within the Container is not see-through

Fiddle:https://jsfiddle.net/jzhang172/b09pbs4v/ I am attempting to create a unique scrolling effect where any content within the bordered container becomes fully opaque (opacity: 1) as the user scrolls. It would be great if there could also be a smooth tr ...

javascriptjqueryhtmlcss

IntelliJ automation in Java does not allow clicking the button

Currently, I am on the PayPal page and I need to automate clicking the agree button. <form id="ryiForm" class="proceed ng-pristine ng-valid" ng-class="{true: 'validated'}[validated]" ng-submit="confirm.$valid && onPay()" novalidate= ...

javacssintellij-ideaselenium-webdriver

Configuration of Bootstrap "col" without an xl number

Hello everyone, I am currently working on a project using Bootstrap, where I have a row with five child elements: <div class="container"> <div class="row"> <div class="col">[content]</div> ...

cssbootstrap-5

Error code 2 in Phonegap 2.2.0 iOS file transfer issue

saricsarda2[326:15b03] Executing multiple tasks -> Device: YES, App: YES saricsarda2[326:15b03] -[CDVFileTransfer download:] [Line 313] File Transfer is currently downloading... saricsarda2[326:15b03] File Transfer has been completed with response code ...

iosxcodehtmlcordova

Unable to conceal tab content upon clicking the identical tab

I recently implemented a tab system with panels that seems to be working well when switching between tabs. However, I'm facing an issue where clicking on the same tab does not hide the corresponding panel and reset the aria attributes as intended. I&a ...

javascripthtmljquerycss

Combining a background image and gradient in Internet Explorer: a comprehensive guide

I recently encountered a challenge while trying to apply a gradient and a background image to an element using CSS. After utilizing Colorzilla for the gradient, I obtained the following code snippet. background: rgb(250,250,250); background: -moz-linear-g ...

jquerycssinternet-explorergradient

Ways to display an HTML code by utilizing the onclick() function through PHP?

I have a button that looks like this: <input type="submit" name="submit5" class="btn" value="Add Date" onclick="create_date_field()" /> Every time the button is clicked, I want to append the following code inside the <tr> tags. It should be po ...

javascriptphphtml

Jquery form calculation not matching up

I've been struggling to make this jQuery math function work with my form. The snippet works fine, but when I try to integrate it into the actual form, I can't seem to get it aligned properly to perform the required calculations. Any suggestions ...

javascriptjqueryhtml

Error in Form Validation: inconsistent positioning of relative jump and sticky header

I have a webpage with a web form and a sticky header. When a user attempts to submit the form without filling in required fields using a modern-ish browser, an error message pops up as expected. The issue arises when the sticky header hides the input field ...

javascripthtmlvalidationpage-jump

JavaScript is incapable of locating image files

I am encountering Resource Not Found errors for the image files I am attempting to load into var manifest. Despite following the tutorial code closely, I can't seem to identify what is causing this issue... (function () { "use strict"; WinJS.Bin ...

javascripthtmlwindows-8

Stylized widget for showcasing a list of cities for meetups

After extensive searching, I have yet to find a solution to stylize the "City List" widget for Meetup. The specific widget I am focusing on is the first one listed here. () Despite exploring various options such as the widget foundry and conducting onlin ...

csspluginswidgetmeetup