We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Tooltip Component for React

The tooltip component is used to display a pop-up that contains some information or message when you hover, click, focus, or touch an element. The information displayed in the tooltip can include simple text, images, hyperlinks, or custom templates.


Easy integration

Easy integration

Only a message and target element are required to configure the default tooltip. It will work out of the box. However, it provides many options for updating the position and animation, as well as customizing the appearance.


Touch-Friendly

The tooltip responds to screen size and adapts its contents to fit any device. It recognizes touch gestures, displays the message when a touch and hold action is performed, and hides after a delay of 1500 ms. This provides the best user experience for phones, tablets, and desktops.

Touch-Friendly


Position and Mouse Trails

The tooltip can be positioned to 12 different locations around the target. Tooltip can be configured to follow or not follow the mouse. Four similar options are available for positioning the tip pointer.


Smart Positioning

The tooltip intelligently positions the content and its arrows in the best location to fit the view port or container.


Load Content

Through templates, tooltip content can be loaded with inline HTML, images, iframe, videos, and maps. A title can be added to the content.


Dynamic Tooltip

Load dynamic content on demand using an AJAX callback if content is not finalized during tooltip creation.


Show and Hide

Control when the tooltip should appear and when it should be hidden using the available auto, hover, click, focus, and custom modes. You can also implement your own custom mode to control the tooltip show and hide behavior.


SVG and Canvas Support

Supports both SVG and canvas elements. Users can directly attach to <svg> or <canvas> elements to show tooltips on data visualization elements.


Animation Effects

The tooltip show and hide animations are completely customizable, including the animation effect, duration, and delay. Transition effects can be controlled at the application level.


Customization

The tooltip can be completely altered using CSS.


Accessibility

  • Fully supports WAI-ARIA accessibility to make it accessible to screen readers and assistive devices.

  • UI element visuals such as foreground color, background color, line spacing, text, and images are designed based on the WCAG 2.0 standard.

  • Follows WAI-ARIA best practices for implementing keyboard interaction.

Developer Friendly APIs

You have control over all UI elements and behaviors of the tooltip to provide the best experience to your end users through a rich set of developer friendly APIs.


45+ REACT COMPONENTS

Transform your applications today by downloading our free evaluation versionDownload Free Trial

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.