GravityCalendar event tooltips: what they show and how to change them

When a visitor points at an event on a GravityCalendar calendar, a small box called a tooltip opens next to it. For events from your form, the tooltip shows the Event Description and nothing else. For events shown from another calendar feed, the tooltip shows that calendar’s own description.

Tooltip behavior #

The Grid layout can cut a long event title short. To show the full title or the Event Location in the tooltip, copy the text and merge tags from Event Title and Event Location into the Event Description.

• An event whose description comes out empty gets no tooltip. A description left with only line breaks opens an empty tooltip. Remove leftover line breaks from the Event Description, such as blank lines and a line break after the last line.
• Text typed around a merge tag counts as a description, so with Room: {Room:4} an event with no room still shows a tooltip that reads “Room:”.
• The tooltip opens when the pointer moves over the event, and when the event gets keyboard focus, for example with the Tab key. In the List and Agenda layouts, keyboard focus opens it in GravityCalendar 2.23.1 and later.
• The tooltip stays open while the pointer is inside it, so visitors can select its text and click its links.
• By default it opens to the right of the event. When there is no room, it can open below the event or shift to stay on screen.
• It works in every layout: Grid, Agenda, List, and Stack.

Step 1: Write the Event Description #

1. In your WordPress dashboard, go to GravityKit, then click All Calendars.
2. Click the name of your calendar.
3. In the Calendar Fields section, find Event Description.
4. Type the text you want in the tooltip. To add a value from the entry, such as a Paragraph field, click the merge tag icon above the box.
5. Click Save Settings.

Each event builds its description from its own entry. For example, Room: {Room:4} shows each event’s room.

Step 2 (optional): Show formatting and links in the tooltip #

The tooltip shows the description as plain text. It keeps line breaks, but HTML tags appear as typed. To show bold text, lists, or links, turn on Allow HTML Content:

1. In the same settings, scroll down to the Calendar Settings section.
2. Under Allow HTML Content, check Enable.
3. Click Save Settings.

The setting applies to event titles too. A “Read more” link made with the [gv_entry_link] shortcode needs it as well, as Linking a calendar event to its single entry page shows.

Turn off the tooltip #

With Event Description empty, events from your form get no tooltip. Events shown from another calendar feed keep their own descriptions, so their tooltips still open. The description also goes into calendar subscriptions and downloaded events. To keep it there and turn off every tooltip on a calendar, including those of events from other calendar feeds, add this code:

/**
 * Turns off the event tooltip on one GravityCalendar calendar.
 *
 * @param array $extra_options Calendar options that are not FullCalendar's own.
 * @param int   $form_id       ID of the form the calendar uses.
 * @param int   $feed_id       ID of the calendar.
 *
 * @return array The options with the tooltip turned off.
 */
add_filter( 'gravityview/calendar/extra_options', function ( $extra_options, $form_id, $feed_id ) {
    // Replace 12 with the ID of your calendar. Remove these three lines to turn off the tooltip on every calendar.
    if ( 12 !== $feed_id ) {
        return $extra_options;
    }

    $extra_options['tooltip'] = false;

    return $extra_options;
}, 10, 3 );

/**
 * Turns off the event tooltip on one GravityCalendar calendar.
 *
 * @param array $extra_options Calendar options that are not FullCalendar's own.
 * @param int   $form_id       ID of the form the calendar uses.
 * @param int   $feed_id       ID of the calendar.
 *
 * @return array The options with the tooltip turned off.
 */
add_filter( 'gravityview/calendar/extra_options', function ( $extra_options, $form_id, $feed_id ) {
    // Replace 12 with the ID of your calendar. Remove these three lines to turn off the tooltip on every calendar.
    if ( 12 !== $feed_id ) {
        return $extra_options;
    }

    $extra_options['tooltip'] = false;

    return $extra_options;
}, 10, 3 );

To find the calendar’s ID, go to GravityKit, then All Calendars, and read the ID column.

Change where the tooltip opens #

The tooltip comes from the Tippy.js library, and the tooltip_options setting passes options to it. This code makes above the event the preferred position on every calendar on the site. When space is short, the tooltip can still open below or to the right of the event:

/**
 * Makes above the event the preferred tooltip position on every GravityCalendar calendar.
 *
 * @param array $extra_options Calendar options that are not FullCalendar's own.
 *
 * @return array The options with the new tooltip position.
 */
add_filter( 'gravityview/calendar/extra_options', function ( $extra_options ) {
    $extra_options['tooltip_options']['placement'] = 'top';

    return $extra_options;
} );

/**
 * Makes above the event the preferred tooltip position on every GravityCalendar calendar.
 *
 * @param array $extra_options Calendar options that are not FullCalendar's own.
 *
 * @return array The options with the new tooltip position.
 */
add_filter( 'gravityview/calendar/extra_options', function ( $extra_options ) {
    $extra_options['tooltip_options']['placement'] = 'top';

    return $extra_options;
} );

Other Tippy.js options, such as delay, go in the same tooltip_options array.

Related articles #

• Getting Started with GravityCalendar
• Linking a calendar event to its single entry page
• Displaying events from another calendar with GravityCalendar
• Calendar: Developer Hooks