How do I change the behavior on the tooltip?

[Adam]

I would like to change the behavior on the tooltip in month view. The tooltips popup on hover and we would like them to activate on click.

I have been checking out the themer’s guide and looking at wp-content/plugins/events-calendar-pro/src/views/pro/week/single-event.php and wp-content/plugins/events-calendar-pro/src/views/pro/week/tooltip.php. But I don’t see anything to change the behavior.

I’m thinking it’s in the tribe_events_week_event_attributes() function, but I don’t know where to find it.

Can you point me in the right direction either by a link to some documentation or instructions?

Thanks!

[Adam]

I’m still digging into this.

Is this the file I need to change? line 976?
public/wp-content/plugins/the-events-calendar/src/resources/js/tribe-events.js

Is there an update on this post?

[Patricia]

Hey Adam,

Thank you for reaching out to us!

The javascript file you want to modify is the-events-calendar/src/resources/js/tribe-events.js (and tribe-events.min.js). We don’t have a template override for these files, so you will have to make this change via custom extension/plugin. You have to dequeue our scripts & enqueue your own custom scripts after that.

On line 976, you can replace ‘mouseenter’ with ‘click’ to achieve what you want, but please bear in mind that you you will have to change other plugin templates, because if you click an event in month view calendar, it will lead you to the event’s page/URL and not open the tooltip as intended.

$container.on( 'mouseenter', 'div[id*="tribe-events-event-"], div.event-is-recurring', function() {

We do have a list of recommended developers who could help you out with the code if necessary:

https://theeventscalendar.com/knowledgebase/find-a-customizer/

I hope this helps! Let me know if you have any other questions and I’ll be happy to assist!

Best Regards,

Patricia

[Adam]

Thank you Patricia!

could you expand on:

you will have to change other plugin templates, because if you click an event in month view calendar, it will lead you to the event’s page/URL and not open the tooltip as intended.

is this the other plugin template I would have to change?

public/wp-content/plugins/events-calendar-pro/src/resources/js/tribe-events-pro.js

[Patricia]

Hi Adam,

You are welcome! Answering your question, you have to override the single-event.php file on to remove the URL from the Event title in month view calendar. Please copy the single-event.php file from the-events-calendar/src/views/month , paste it in [your-theme]/tribe-events/month/single-event.php and replace line 196:

" class="url"><?php echo $title ?>

with:

<?php echo $title ?>

Once you override this template and modify the tooltip behavior from mouseenter to click on tribe-events.js/tribe-events.min.js , tooltips will be activated by click and if you want to access a particular event, you’ll have to click on “Continue reading” inside the tooltip.

I hope this helps! If you have any other questions at all please feel free to let me know and I’d be happy to help as best I can!

Cheers,

Patricia

[Patricia]

Hi Adam,

It looks like the code lines I shared with you had formatting issues after my post submission. Sharing a screenshot here to exemplify.

Cheers,

Patricia

[Adam]

I am trying to dequeue the tribe-events.min.js file.

Here is my dequeue code I am putting in function.php in the child theme:

/*
* dequeue tribe-events.min.js files
*/
function dequeue_tribe_events() {
    wp_dequeue_script( 'tribe-events' );
    wp_deregister_script( 'tribe-events' );
}
add_action( 'wp_print_scripts', 'dequeue_tribe_events', 100 );

It doesn’t seem to be working since I can still find that file when I view source.

Have any tips?

[Patricia]

Hi Adam,

The name that we use to enqueue the tribe-events.min.js file is ‘tribe-events-calendar-script’, so to achieve what you want, please add the following snippet in your theme’s functions.php file:

https://gist.github.com/nefeline/cbef26d2b09737d217874d72b26a96b7

I tested it in my own WordPress install and the script was dequeued as expected.

I hope this helps!

Cheers,

Patricia

[Adam]

the dequeue worked!

Thanks again Patricia!

Of course now I’m having issues getting the edited files in. I am trying to follow the part about Javascript Templates in the Themer’s Guide. It says to follow the Customizing Styles section.

So I changed the code recommended for .css file, which is:

function replace_tribe_events_calendar_stylesheet() {
   $styleUrl = get_bloginfo('template_url') . '/custom-events-stylesheet.css';
   return $styleUrl;
}
add_filter('tribe_events_stylesheet_url', 'replace_tribe_events_calendar_stylesheet');

to:

function replace_tribe_events_calendar_tribe_events_js() {
   $jsUrl = get_bloginfo('template_url') . '/tribe-events.js';
   return $jsUrl;
}
add_filter('tribe_events_stylesheet_url', 'replace_tribe_events_calendar_tribe_events_js');

But I think I need a different filter than tribe_events_stylesheet_url.

I put this code in functions.php in my child theme along with the .js files.

I also haven’t had any luck finding more resources here, can you point me in the right direction?

[Patricia]

Hi Adam,

There’s no need to change the .css files as your customization is only modifying one line of tribe-events.js. The basic steps you have to follow are:

1- Dequeue tribe-events.min.js (this step is complete);
2- Copy the content from tribe-events.js to another file in your custom plugin or in your theme, make the necessary changes, save and create the minified version of your custom code;
3- Register and enqueue your new script by using wp_register_script and wp_enqueue_script.

Please note that the tribe-script.js you dequeued has some dependencies, so I would recommend you to take a look at the-events-calendar/src/Tribe/Asset/Calendar_Script.php to see how it’s enqueued so you can follow the same general guidelines.

If you think that this customization is more complex than expected, I would recommend you to hire a developer to help you with the code!

Cheers,

Patricia

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts