Tooltips not showing, custom theme

[Matt]

I’m running into issues getting tooltips to show up on my custom theme.

I’ve narrowed it down to a conflict with my theme (good news, right??), but I’m hoping you can help me find where to look.

A couple things happen when I activate my custom theme:

1. Mouseover events DO seem to fire in Chrome devtools event listeners. However, adding some console.log to the relevant lines in tribe-events.min.js:53 tribe-events-pro.min.js:402 (unminified) returned nothing in the console on mouseover.
2. Doing jQuery(“.tribe-events-tooltip”) in the console returns [] — it should find stuff like <div id="tribe-events-tooltip-4129" class="tribe-events-tooltip" style="bottom: 81px; display: none;">…</div> as it does with twentysixteen
3. The month view #tribe-events-event- … data-tribejson outputs differently:

   
   {
   "i18n": {
     "find_out_more": "Find out more \u00bb",
     "for_date": "Events for"
   },
   "eventId": 5167,
   "title": "Sample Event Title",
   "permalink": "http:\/\/my-website.com\/event\/sample-event-title\/",
   "imageSrc": "",
   "dateDisplay": "September 8 @ 8:00 am - 5:00 pm",
   "imageTooltipSrc": "",
   "excerpt": "<p>Sample event description &nbsp; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt venenatis diam, ut dictum nunc rutrum at. Morbi eleifend auctor convallis. Duis porta pulvinar risus a hendrerit. Pellentesque condimentum, turpis vel hendrerit porta, neque ipsum faucibus nibh, eu bibendum libero lorem bibendum ipsum. Nunc luctus, ligula vel pulvinar vehicula, justo ante <\/p>",
   "categoryClasses": "tribe-events-category- post-5167 tribe_events type-tribe_events status-publish hentry tribe-events-last",
   "startTime": "September 8 @ 8:00 am",
   "endTime": "September 8 @ 5:00 pm"
   }
   

   It should include a Continue Reading link:

   
   {
   "i18n": {
     "find_out_more" : "Find out more \u00bb",
     "for_date"      : "Events for"
   },
   "eventId"         : 5167,
   "title"           : "Sample Event Title",
   "permalink"       : "http:\/\/my-website.com\/event\/sample-event-title\/",
   "imageSrc"        : "",
   "dateDisplay"     : "September 8 @ 8:00 am - 5:00 pm",
   "imageTooltipSrc" : "",
   "excerpt"         : "<p>Sample event description &nbsp; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt venenatis diam, ut dictum nunc rutrum at. Morbi eleifend auctor convallis. Duis porta pulvinar risus a hendrerit. Pellentesque condimentum, turpis vel hendrerit porta, neque ipsum faucibus nibh, eu bibendum libero lorem bibendum ipsum. Nunc luctus, ligula vel pulvinar vehicula, justo ante &hellip; <a href=\"http:\/\/my-website.com\/event\/sample-event-title\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> \"Sample Event Title\"<\/span><\/a><\/p>",
   "categoryClasses" : "tribe-events-category- post-5167 tribe_events type-tribe_events status-publish hentry tribe-events-last",
   "startTime"       : "September 8 @ 8:00 am",
   "endTime"         : "September 8 @ 5:00 pm"
   }
   

I disabled all plugins and my functions.php, where I’m just enqueueing jQuery in the footer (sheesh) — no luck.

Tried enqueuing jquery-migrate too just in case you’re using those older functions.

Could archive.php be conflicting with the events page?

Ideas?

• This topic was modified 9 years, 7 months ago by Matt. Reason: inline code formatting
• This topic was modified 9 years, 7 months ago by Cliff.

[Cliff]

Hi again, Matt.

You might try changing wp-admin > Events > Settings > Display tab > “Events template” option and then try with your theme again.

I also know we have some customizations in place for Twenty Sixteen (based on the theme slug). Therefore, you might want to rename the ‘twentysixteen’ directory to something else, like ‘twentysixteen-testing’

Then you might see what the tooltips and JSON is and how it compares when using your own theme. I’d also highly suggest you disable all non-Modern Tribe plugins while trying to debug with your theme.

 

Let us know what you find out.

Thanks.

[Matt]

I ran into the following thread, seems like closing tags need to be escaped in the tooltip <script type=”text/html” id=”tribe_tmpl_tooltip”> tags – what hook / function outputs that? Maybe I have some parsing conflict there.

https://wordpress.org/support/topic/latest-release-breaks-the-events-calendar-by-tribe/

Re-tested, all plugins disabled except the following required for testing:

• advanced-custom-fields-pro
• events-calendar-pro
• the-events-calendar
• the-events-calendar-importer-ical

Renamed twentysixteen to twentysixteen-testing.

Confirmed, using wp-admin > Events > Settings > Display tab > Events template > “Default Events Template” option

My theme, (no tooltips, Continue Reading missing):

{
  "i18n": {
    "find_out_more" : "Find out more \u00bb",
    "for_date"      : "Events for"
  },
  "eventId"         : 5167,
  "title"           : "Sample Event Title",
  "permalink"       : "http:\/\/wi-2016.test\/event\/sample-event-title\/",
  "imageSrc"        : "",
  "dateDisplay"     : "September 8 @ 8:00 am - 5:00 pm",
  "imageTooltipSrc" : "",
  "excerpt"         : "<p>Sample event description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt venenatis diam, ut dictum nunc rutrum at. Morbi eleifend auctor convallis. Duis porta pulvinar risus a hendrerit. Pellentesque condimentum, turpis vel hendrerit porta, neque ipsum faucibus nibh, eu bibendum libero lorem bibendum ipsum. Nunc luctus, ligula vel pulvinar vehicula, justo ante dignissim <\/p>",
  "categoryClasses" : "tribe-events-category- post-5167 tribe_events type-tribe_events status-publish hentry tribe-events-last",
  "startTime"       : "September 8 @ 8:00 am",
  "endTime"         : "September 8 @ 5:00 pm"
}

Twenty Sixteen (yes tooltips, Continue Reading shows up):

{
  "i18n": {
    "find_out_more" : "Find out more \u00bb",
    "for_date"      : "Events for"
  },
  "eventId"         : 5167,
  "title"           : "Sample Event Title",
  "permalink"       : "http:\/\/wi-2016.test\/event\/sample-event-title\/",
  "imageSrc"        : "",
  "dateDisplay"     : "September 8 @ 8:00 am - 5:00 pm",
  "imageTooltipSrc" : "",
  "excerpt"         : "<p>Sample event description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt venenatis diam, ut dictum nunc rutrum at. Morbi eleifend auctor convallis. Duis porta pulvinar risus a hendrerit. Pellentesque condimentum, turpis vel hendrerit porta, neque ipsum faucibus nibh, eu bibendum libero lorem bibendum ipsum. Nunc luctus, ligula vel pulvinar vehicula, justo ante dignissim &hellip; <a href=\"http:\/\/wi-2016.test\/event\/sample-event-title\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> \"Sample Event Title\"<\/span><\/a><\/p>",
  "categoryClasses" : "tribe-events-category- post-5167 tribe_events type-tribe_events status-publish hentry tribe-events-last",
  "startTime"       : "September 8 @ 8:00 am",
  "endTime"         : "September 8 @ 5:00 pm"
}

Also, twentysixteen-testing throws a console warning (last line):

JQMIGRATE: Migrate is installed, version 1.4.1
tribe-events.min.js?ver=4.2.6:1 ["TEC Debug: Tribe Events JS init, Init Timer started from tribe-events.js."]
tribe-events.min.js?ver=4.2.6:1 TEC Debug: Browser and events settings information:
tribe-events.min.js?ver=4.2.6:1 ["TEC Debug: tribe-events.js successfully loaded"]
tribe-events.min.js?ver=4.2.6:1 ["TEC Debug: tribe-events-pro.js successfully loaded"]
tribe-events.min.js?ver=4.2.6:1 ["TEC Debug: tribe-events-bar.js successfully loaded"]
tribe-events.min.js?ver=4.2.6:1 ["TEC Debug: tribe-events-ajax-maps.js successfully loaded"]
tribe-events.min.js?ver=4.2.6:1 ["TEC Debug: tribe-events-ajax-calendar.js successfully loaded, Tribe Events Init finished"]
tribe-events.min.js?ver=4.2.6:1 Tribe JS Init Timer: 45.896ms
tribe_tmpl_tooltip:1 '//@ sourceURL' and '//@ sourceMappingURL' are deprecated, please use '//# sourceURL=' and '//# sourceMappingURL=' instead.

My theme doesn’t:

JQMIGRATE: Migrate is installed, version 1.4.1
tribe-events.min.js?ver=4.2.6:1 ["TEC Debug: Tribe Events JS init, Init Timer started from tribe-events.js."]
tribe-events.min.js?ver=4.2.6:1 TEC Debug: Browser and events settings information:
tribe-events.min.js?ver=4.2.6:1 ["TEC Debug: tribe-events.js successfully loaded"]
tribe-events.min.js?ver=4.2.6:1 ["TEC Debug: tribe-events-pro.js successfully loaded"]
tribe-events.min.js?ver=4.2.6:1 ["TEC Debug: tribe-events-bar.js successfully loaded"]
tribe-events.min.js?ver=4.2.6:1 ["TEC Debug: tribe-events-ajax-maps.js successfully loaded"]
tribe-events.min.js?ver=4.2.6:1 ["TEC Debug: tribe-events-ajax-calendar.js successfully loaded, Tribe Events Init finished"]
tribe-events.min.js?ver=4.2.6:1 Tribe JS Init Timer: 32.484ms

• This reply was modified 9 years, 7 months ago by Matt. Reason: remove from console warning

[Cliff]

Thanks for the additional details.

I passed this along to one of our developers and he shared:

The view/month/tooltip.php is the template where it is put together, and it’s included from within another template.

Does this help?

[Matt]

Hmm.. not exactly. But my JSON seems valid, no parsing issues. When I try the single-event.php data-attribute JSON parsing code in the console, it returns all my event listings just fine:

/* Plain javascript to loop over all events in grid view, get the json string, convert to object and log event title: */
(function (window, document) {

  var events = document.querySelectorAll('.tribe_events');

  for (var i=0; i < events.length; i++) {

    var event = events[i],
      data = event.getAttribute('data-tribejson'),
      obj = JSON.parse(data);

    console.log('Event title is: ' + obj.title);
  }

})(window, document);

Console:

VM7097:1 Event title is: My Event Title
VM7097:1 Event title is: My Other Event Title
...

Same thing with the jQuery snippet.

So.. where is the hangup? What else might prevent tribe-events-pro.js from doing it’s thing?

[Cliff]

Please provide us a URL we can see things for ourselves.

Also, please enable WP_DEBUG and SCRIPT_DEBUG.

If your custom theme is based on a theme where things are working fine, it might also be advisable to compare your custom theme’s code to the one it’s based on.

[Matt]

http://brand-new-wp-install.com/events/

define(‘WP_DEBUG’, true);
define(‘SCRIPT_DEBUG’, true);

No child / root theme here.

[Cliff]

Comparing your link to our demo site, I saw this difference: https://cl.ly/0L1O1c2h131g

Maybe that helps…

[Matt]

body_class() needed to be added to the <body> in header.php, my theme had wp generated classes on the <html> only.

Hope this helps someone else.

Consider adding $(‘html’) to tribe-events.js ?

[Cliff]

Ah, yes. I saw some body classes added to your site so I thought you had those, which is why I didn’t suggest it.

We actually have a KB article about it, in case it may help you or someone else in the future: What is a body class and why do I need one?

Thanks and have a great rest of your week.

[Author]

Posts