Fixing The Events Calendar Tooltip Cutoff Issue
One of my favorite calendar and events plugins for WordPress is from the good folks at Modern Tribe, and it’s called The Events Calendar. I’ve created several sites that needed some aspect of a public calendar, and after trying out about half a dozen, I found The Events Calendar is was the best bang for the buck. Their free version is still pretty feature rich, but their paid version has lots of great features and add-ons. And their support team is one of the best I have worked with.
On a recent project, I noticed something very odd about the month view of a events calendar I was creating. The top row of events had their tooltip popups cutoff, meaning the content was mostly unreadable for those events.
After experimenting with various snippets of CSS and searching through support threads, I didn’t have much luck. I had tried a bunch of combinations of CSS rules that dealt with overflow and z-index of the tooltip class, but to no avail. I was almost to the point of giving up and telling my client we’d have to deal with it. However, I had an idea to try a different tact with the CSS rules: instead of altering the tooltip class, I tried altering the table element itself. And voila! The Events Calendar tooltips were no longer cutoff.
The secret to fixing this issue ended up being a very simple CSS rule:
overflow: auto !important;
There are a couple of options for adding this custom CSS to your theme. First, many premium themes come with an option to add custom CSS. In my case, I was working with the Jupiter theme, and they have a custom CSS configuration area I used to add the above snippet. If your theme doesn’t have a custom CSS option, there are plugins that accomplish the same thing. And if you’re using a child theme (which hopefully you are), you can add it to the style.css file. Whatever you do, never update theme files directly as they will most likely get overridden in a future theme update.