Overview

The React Tooltip component is a pop-up. It shows some information or message when you hover, click, focus, or touch on image, button, anchor tag etc., on any element. The information displayed in the tooltip can include simple text, images, hyperlinks, or custom templates.

Position and mouse trails

The tooltip has twelve different options to position it around the target. Also, you can configure the Tooltip to follow or not follow the mouse. To position the tip pointer, there are four options: Right, left, top, and bottom.

Fancy tooltip

Tooltip design

React Tooltip is shipped with several built-in themes such as material, bootstrap, fabric (office 365), and high contrast. Users can customize any one of these built-in themes or create new themes to achieve their own desired look and feel. It is achieved either by simply overriding SASS variables or using our Theme Studio application with ease.

Easy integration

You just need message and target element to make the tooltip fully functional. It will work out of the box. However, it provides many options to change the position, animation, and appearance.

Touch-Friendly

The Tooltip responds to screen size and adapts its contents to fit any touch device. It recognizes touch gestures, displays the message when performing touch and hold action. It will hide after 1500ms. This provides the best user experience for touch devices such as phones, tablets, and desktops.

SVG and canvas support

React Tooltip supports both SVG and canvas elements. Users can directly attach tooltips to <svg> or <canvas> elements to show data visualization elements.