React Tooltip Component

The Tooltip component provides contextual information when users interact with elements on your application. This elegant UI element appears when users hover over, focus on, or tap UI elements, offering clarification and additional details.

Designed with simplicity and user experience in mind, our Tooltip component integrates seamlessly with your React application, supporting customizable positioning, animations, and styling options to match your design system.

Getting started

To create a new Vite project, refer to the Vite documentation. Once that Vite project is ready to run with default settings, let’s add the React Tooltip component to the project.

Installing Syncfusion® React packages

To use the React Tooltip component in this project, the @syncfusion/react-popups package needs to be installed using the following command:

npm install @syncfusion/react-popups

npm install @syncfusion/react-popups

Adding CSS reference

In this article, the Material theme is applied using CSS styles, which are available in installed packages. The necessary Material CSS styles for the Tooltip component and its dependents were imported into the src/App.css file.

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-popups/styles/material.css';

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-popups/styles/material.css';

To include the Tooltip component in your application, import the Tooltip from the @syncfusion/react-popups package in App.tsx.

import { Tooltip } from "@syncfusion/react-popups";

import { Tooltip } from "@syncfusion/react-popups";

Add the Tooltip component in application as shown in below code example.

import { Tooltip } from '@syncfusion/react-popups';
import { UserIcon } from "@syncfusion/react-icons"
import { Button, Variant, Color, Size } from '@syncfusion/react-buttons';
import './App.css';

export default function App() {
    return (<div className="component-section tooltip-section">
        <Tooltip content={<>Profile</>} >
            <Button variant={Variant.Standard} color={Color.Secondary} icon={<UserIcon />} size={Size.Large}></Button>
        </Tooltip>
    </div>);
}

import { Tooltip } from '@syncfusion/react-popups';
import { UserIcon } from "@syncfusion/react-icons"
import { Button, Variant, Color, Size } from '@syncfusion/react-buttons';
import './App.css';

export default function App() {
    return (<div className="component-section tooltip-section">
        <Tooltip content={<>Profile</>} >
            <Button variant={Variant.Standard} color={Color.Secondary} icon={<UserIcon />} size={Size.Large}></Button>
        </Tooltip>
    </div>);
}

Run the project

To run the project, use the following command:

npm run dev

npm run dev

The following example display simple, informative Tooltip when hovering over UI elements. This fundamental implementation shows how Tooltip can provide context for icons and controls with minimal configuration. To create a basic Tooltip, use the content property to define the content and the position property to control where the Tooltip appears.

Template

Create rich, custom Tooltip content using templates. This example demonstrates a profile Tooltip with an avatar and description, showcasing how Tooltip can display complex structured information.

Triggering types

Control how Tooltip are triggered with different interaction modes. To specify how a Tooltip is triggered, use the opensOn property with values like Auto, Focus, Hover, or Click. This determines what user interaction will display the Tooltip.

For mobile devices, the Tooltip triggers on tap-hold action instead of hover.

Multiple targets

Efficiently apply Tooltip to multiple elements using a filtering mechanism. This technique allows different elements within a container to display unique Tooltip content. To implement Tooltip for multiple targets, use the onFilterTarget callback to provide a function that evaluates target elements and returns true for elements that should trigger the Tooltip.

Position your Tooltip precisely where needed with twelve strategic placement options around target elements. The component offers complete directional control with positions like Top Left, Right Center, or Bottom Right, ensuring Tooltip remain visible and contextual.

The controlled Tooltip lets you manually manage when Tooltip appear or disappear using a state variable. In this example, the Tooltip is controlled by the open, onClose, and onOpen properties.

Animations

Add smooth visual effects to your Tooltip with animations. The example shows three animation types: Zoom, Fade, and combined Fade and Zoom effects. Configure opening and closing animations separately using the animation property with custom duration settings.

The sticky Tooltip stays open even after users move away from the button. Use the sticky property to keep Tooltip visible until users close them.

Scroll Mode

When a specific height is set for a Tooltip and its content exceeds that height, a scroll mode is enabled automatically. This feature allows users to scroll through the content within the Tooltip.

Delay

Control how quickly Tooltip appear and disappear using delay settings. The openDelay property determines how long a user must hover before the Tooltip appears, while the closeDelay property sets how long the Tooltip stays visible after the cursor moves away. This example demonstrates Tooltip with a 1000ms (1 second) delay for both opening and closing.

Mouse trail

Tooltip with mouse trail functionality follow cursor movements, providing contextual information in real-time. The followCursor property enables Tooltip to stay connected to the pointer position for enhanced interaction. This example showcases an "Image Pixel Inspector" that displays color data and coordinates while hovering over an image - ideal for design tools, image editors, and interactive maps.

The Mouse Trail functionality is only available on desktop devices as it relies on mouse pointer movements.

Image Pixel Inspector

Position: (0, 0)

Color: #3498db

Accessibility

The Tooltip component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the Tooltip component is outlined below.

Accessibility Criteria	Compatibility
WCAG 2.2 Support
Section 508 Support
Screen Reader Support
Right-To-Left Support
Color Contrast
Mobile Device Support
Keyboard Navigation Support
Accessibility Validation

- All features of the component meet the requirement.

- Some features of the component do not meet the requirement.

- The component does not meet the requirement.

WAI-ARIA attributes

The Tooltip component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Tooltip component:

Attributes	Purpose
role=”tooltip”	The element that serves as the container for the `Tooltip` has the ARIA role of `tooltip`.
aria-describedby	This attribute is added to the target element on which the `Tooltip` gets opened, when focusing or hovering over it. It usually holds the randomly generated `Id` value of the `Tooltip` element. In case, the target element already holds an `aria-describedby` attribute with `Id` value of some other component, then the `Tooltip` Id value can be additionally appended to the existing `aria-describedby` attribute separated by a space as shown in the example below. For example: aria-describedby = "my-text my-tooltip" my-text is the Id of some other component. my-tooltip is the id of `Tooltip` component. When the `Tooltip` is closed, the `aria-describedby` attribute is removed from the target.
aria-hidden	This attribute is assigned to the `Tooltip` element whose default value is true. When `true`, it denotes that the `Tooltip` element is in a hidden or a closed state. When the `Tooltip` appears on the screen, it’s value changes to `false`.

Keyboard interaction

The Tooltip component followed the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Tooltip component.

Windows	macOS	Action
`Escape`	`Escape`	Closes or dismisses the `Tooltip`.
`Tab`	`Tab`	A form control receiving focus (say through tab key), opens the Tooltip, and on focus out closes it.

When the Tooltip is being displayed on the target element, focus continues to stay on it.

If the Tooltip opens on mouse entering into the target element space, then it should be dismissed only when the mouse leaves that target.

If the Tooltip opens on the target element that receives focus, then it should be closed only when the focus moves out of that target element. Likewise, if the Tooltip opens on a click, then it should be closed only on another click action.

React Tooltip