---
title: "GravityCalendar event tooltips: what they show and how to change them"
date: 2026-10-07
updated: 2026-10-07
author: "Block MCP (service account)"
link: "https://www.gravitykit.com/docs/gravitycalendar/event-tooltip/"
category: "GravityCalendar"
---

When a visitor points at an event on a [GravityCalendar](https://www.gravitykit.com/products/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**.

![A GravityCalendar month grid, Monday to Sunday, with a tooltip open next to the Book Club event showing its start time, end time, and a Read more link](https://www.gravitykit.com/wp-content/uploads/2026/10/gravitycalendar-event-tooltip-01-month-grid.png)

## Step 1: Write the Event Description

- In your WordPress dashboard, go to **GravityKit**, then click **All Calendars**.
- Click the name of your calendar.
- In the **Calendar Fields** section, find **Event Description**.
- 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.
- Click **Save Settings**.

![The Event Description box in the Calendar Fields section, where the tooltip text is Room: {Room:4} followed by the {Details:5} merge tag](https://www.gravitykit.com/wp-content/uploads/2026/09/gravitycalendar-hover-card-02-event-description-setting.png)
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**:

- In the same settings, scroll down to the **Calendar Settings** section.
- Under **Allow HTML Content**, check **Enable**.
- 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](https://www.gravitykit.com/docs/gravitycalendar/linking-an-event-to-a-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 );
```

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;
} );
```

Other [Tippy.js options](https://atomiks.github.io/tippyjs/v6/all-props/), such as `delay`, go in the same `tooltip_options` array.

Read here how to add these code samples to your website: [Where to put code samples.](https://www.gravitykit.com/docs/gravityview/customizing-your-views/where-to-put-code-samples/)

## Related articles

- [Getting Started with GravityCalendar](https://www.gravitykit.com/docs/gravitycalendar/creating-a-calendar/)
- [Linking a calendar event to its single entry page](https://www.gravitykit.com/docs/gravitycalendar/linking-an-event-to-a-single-entry-page/)
- [Displaying events from another calendar with GravityCalendar](https://www.gravitykit.com/docs/gravitycalendar/displaying-events-from-another-calendar/)
- [Calendar: Developer Hooks](https://www.gravitykit.com/docs/gravitycalendar/calendar-developer-hooks/)