In this tutorial we will walk through the steps you need to take if you want to include the venue data in the Month view tooltip. The foundation for this can be found in the “Using Template Filters and Actions” article.

Month view tooltip

First, we will need to create a file that holds the venue data we want to display. Then we will need to use a template filter to include that file in the tooltip.

The File

Let’s create a new file in your child theme at this location:[your-theme]/tribe/events/v2/month/tooltip-event-venue.php:

<?php
/**
 * Get the venue ID.
 * @var integer $venue_id
 *
 * @see https://docs.theeventscalendar.com/reference/functions/tribe_get_venue_id/
 */
$venue_id = tribe_get_venue_id();

if ( isset( $venue_id ) && $venue_id != 0 ) {

	/**
	 * Retrieving the venue object.
	 * @var object $venue
	 *
	 * @see https://docs.theeventscalendar.com/reference/functions/tribe_get_venue_object/
	 */
	$venue = tribe_get_venue_object( $venue_id );

	echo '<div class="tribe-events-calendar-month__calendar-event-tooltip-venue tribe-common-b3"><p>';

	echo '<strong>Venue:</strong> ';

	// Display venue name
	echo $venue->post_title;

	// Display venue address
	if ( ! empty( $venue->address ) ) {
		echo ', ' . esc_html( $venue->address );
	}

	// Display venue city
	if ( ! empty( $venue->city ) ) {
		echo ', ' . esc_html( $venue->city );
	}

	echo '</p></div>';
}

The template above checks if a venue for the event exists and if it does, then prints the venue name and the venue city.

It is possible to adjust or expand this information depending on what you would like to display. You can find all the venue-related information and variables in this developer documentation.

The Hook

To make all this information show up you will need to include this new template to show in the tooltip after (for example) the title for the month view. Copy the following code in your functions.php file:

add_action(
	'tribe_template_after_include:events/v2/month/calendar-body/day/calendar-events/calendar-event/tooltip/title',
	function ( $file, $name, $template ) {
		$template->template( 'month/tooltip-event-venue' );
	},
	10,
	3
);

A Detour

Of course, it is possible to put this information in a different place. For that, the appropriate hook needs to be used.

If you look at the hook closely you will discover that it mimics the location of the template files. Let’s dissect that a bit.

We are using this hook:

tribe_template_after_include:events/v2/month/calendar-body/day/calendar-events/calendar-event/tooltip/title

The “after_include” defines that what we are going to insert our new information after the named template. You could also use “before_include” if that’s what you need.

The long string “v2/month/…/title” actually refers to a PHP file in that folder of the plugin, namely:

wp-content/plugins/the-events-calendar/src/views/v2/month/calendar-body/day/calendar-events/calendar-event/tooltip/title.php

Let’s say you wanted to include the venue information after the event description. The description uses this template:

wp-content/plugins/the-events-calendar/src/views/v2/month/calendar-body/day/calendar-events/calendar-event/tooltip/description.php

So the corresponding hook would be:

tribe_template_after_include:events/v2/month/calendar-body/day/calendar-events/calendar-event/tooltip/description

Let’s get back on track now.

Customizing the Appearance

Starting with version 5.0 of The Events Calendar’s views, any non-default elements that you add will be unstyled, allowing you full freedom to customize their display without worrying about style conflicts.

The example above includes some basic classes for formatting. To further style the venue in the month view tooltip, we will need to include a couple of CSS rules into the styles.css file–or any CSS file that will be included on an Events page–in our theme.

For this newly added venue I would give a bit more space to breathe at the bottom with the following CSS:

.tooltipster-base.tribe-events-tooltip-theme .tribe-events-calendar-month__calendar-event-tooltip-venue {
	margin-bottom: var(--tec-spacer-0);
}

The Result

When the steps above are complete and you have an event with the correct fields you should be able to see the venue data in the month view tooltip.

Month view tooltip with venue information