React Scheduler Tooltip
The Scheduler provides built in support for informative event tooltips, allowing quick viewing of event details without opening the event editor. By enabling the Tooltip feature, a contextual popup is displayed when users hover over an event on desktop devices or long press on touch devices.
When eventTooltip is set to true, the Scheduler automatically displays a default tooltip on event hover, displaying key details such as the subject and time of the event.
Tooltip Customization
The Scheduler provides a fully customizable eventTooltip API, enabling replacement of the default tooltip with a rich React template.
This demonstrates how to render custom event details such as title, location, and time using icons and structured layout.
Using the Scheduler's eventTooltip API like content, arrow, and position templates can be enabled, the arrow can be toggled, and tooltip placement can be controlled.
The Scheduler Tooltip can be customized using the following APIs.
| API | Type | Purpose |
|---|---|---|
| content | React.ReactNode | Specifies the content of the tooltip template. |
| arrow | boolean | Shows or hides the pointer of the tooltip. |
| position | Position | Specifies the position of the tooltip element relative to the target element. |
| animation | TooltipAnimationOptions | Specifies the animation options applied to the tooltip during its open and close states. |
| followCursor | boolean | Allows the tooltip to follow mouse-pointer movement over the specified target element. |
| opensOn | string | Specifies the device mode used to display the tooltip content. |
| sticky | boolean | Keeps the tooltip open until it is manually closed. |