Samantha Snead Sam is a technology enthusiast and an experienced software engineer specializing in JavaScript development. She has a BA in Computer Science and is currently working on a MA in Game Programming.

Positioning a tooltip in React using Tippy

4 min read 1121

Positioning tooltips in React with Tippy

A tooltip is a textbox that appears while your cursor hovers over an element in an application and is useful for displaying additional information that a user may need.

Tippy.js is a lightweight, easy-to-use library that provides tooltip solutions, as well as other pop-out style GUI tools. Tippyjs-react is a component of the Tippy library that allows developers to integrate tooltips, popovers, dropdown menus, and other elements in React projects.

This tutorial will show you how to create and position tooltips in a React project using Tippy.

Prerequisites

First, make sure you install React 16.8+, Node.js, and either npm or Yarn before getting started. To make the most out of this guide, we recommend that you have some familiarity with:

  • JavaScript
  • HTML
  • React
  • Programming concepts like functions, objects, arrays, and classes

Getting started

Install tippyjs-react by running one of the following commands from the command line:

npm i @tippyjs/react
//OR
yarn add @tippyjs/react

Open or create a React project with a class and the elements you want to add Tippy tooltips to.

For this tutorial, we’ll use a newsletter request form as an example. Specifically, we’ll focus on adding a tooltip to the form’s Submit button.

Tippy React tooltips newsletter request form
A basic newsletter request form. We will add a tooltip to the Submit button.

Adding a Tippy tooltip to a React project

Import the Tippy component and core CSS with the following commands:

import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css';

The tippy.css import statement is optional. It will make the tooltip look polished with little to no additional effort. This is called “Default Tippy.” If you’d rather create and style your own Tippy elements, or “tippies,” from scratch, you can import and use Headless Tippy instead of tippy.css:

import Tippy from '@tippyjs/react/headless';

Here, we will use Default Tippy with tippy.css to create and position a Tippy React tooltip.

We made a custom demo for .
No really. Click here to check it out.

After importing the Tippy component, insert a Tippy wrapper around the element you want to add a tooltip to:

   <Tippy content="We'll never share your email with anyone else.">
   <Button variant="outline-success" >Submit</Button>
   </Tippy>

These commands will display a Submit button. Whenever a cursor hovers over the button, a tooltip will appear with the text, “We’ll never share your email with anyone else.”

Positioning a Tippy React tooltip

So far, we have not specified where we want to place the Tippy React tooltip relative to our Submit button. When tooltip placement is not specified, Tippy automatically positions them above elements. If an element is at the top of the page and doesn’t have space above it, Tippy will automatically place the tooltip below the element.

Our current code will display a page element whose tooltip appears above it.

Tippy React tooltip and element submit button
By default, Tippy places tooltips above associated elements, which isn’t always ideal. Here, the Email element is being covered by the tooltip when all fields and information should be visible.

Tippy’s default tooltip placement isn’t always ideal. In most cases, it’s necessary to specify placement to prevent tooltips from covering up important page elements.

Tippy makes it easy to reposition tooltips in a React project. Placement options include:

  • Top
  • Bottom
  • Left
  • Right

In our example, we want an unobstructed view of the Email field, so let’s move the tooltip to the right of the button element:

  <Tippy placement='right' content="We'll never share your email with anyone else.">
  <Button variant="outline-success" >Submit</Button>
  </Tippy>
Tippy React tooltip placement right
We’ve set the tooltip placement to “right.” This position is better because the Email element is no longer covered by the tooltip.

It’s possible to put multiple tippies on a single element by nesting Tippy commands:

  <Tippy placement='top' content="Top Tooltip">
  <Tippy placement='bottom' content="Bottom Tooltip">
  <Button variant="outline-success" >Submit</Button>
  </Tippy>
  </Tippy>

These commands will insert a tooltip that says “Top Tooltip” above the associated element and another tooltip that says “Bottom Tooltip” below the same element.

When inserting multiple Tippy wrappers on a single element, be sure to specify different tooltip placements — otherwise, one tooltip will cover all the others for that element.

Tippy React multiple tooltips
The Submit button has two Tippy wrappers around it. One is positioned above the button and the other is below.

Other tips and tricks for Tippy tooltips in React

You can add HTML blocks inside Tippy commands to change and stylize the tooltip. For instance, we can add a span tag to change a tooltip’s text color to orange:

  <Tippy placement='right' content={<span style={{color: 'orange'}}>Orange</span>}>
  <Button variant="outline-success" >Submit</Button>
  </Tippy>
Tippy HTML code to customize the Tippy React tooltip color
You can add HTML code to customize the Tippy React tooltip.

To remove the little arrow on the edge of the tooltip that points to the element, set the arrow attribute to false:

  <Tippy placement='right' arrow={false} content="We'll never share your email with anyone else.">
  <Button variant="outline-success" >Submit</Button>
  </Tippy>
Tippy React tooltip arrow element
The arrow on the tooltip that previously pointed to the element has been removed.

You can also add a delay attribute to the Tippy wrapper, creating a time delay between when the cursor hovers over an element and when the tooltip appears. The delay is measured in milliseconds, so setting the delay attribute to 1000 would lead to a one-second delay.

  <Tippy placement='right' delay={1000} content="We'll never share your email with anyone else.">
  <Button variant="outline-success" >Submit</Button>
  </Tippy>

Conclusion

Now you’ve learned the basics of how to create and position Tippy tooltips in a React project, including how to use Tippy’s placement attribute to position a tooltip around an element. You can also add HTML, remove the tooltip’s arrow, or add a time delay in order to customize your tooltips.

The project and written code used in this tutorial can be found on GitHub. The complete project used the react-bootstrap framework and react-dom-router module, but these are not required for the information contained strictly in this article.

Additional resources

To learn more about using Tippy.js with React, check out these excellent resources:

 

You come here a lot! We hope you enjoy the LogRocket blog. Could you fill out a survey about what you want us to write about?

Which of these topics are you most interested in?
ReactVueAngularNew frameworks
Do you spend a lot of time reproducing errors in your apps?
YesNo
Which, if any, do you think would help you reproduce errors more effectively?
A solution to see exactly what a user did to trigger an errorProactive monitoring which automatically surfaces issuesHaving a support team triage issues more efficiently
Thanks! Interested to hear how LogRocket can improve your bug fixing processes? Leave your email:

Full visibility into production React apps

Debugging React applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

LogRocket is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — .

Samantha Snead Sam is a technology enthusiast and an experienced software engineer specializing in JavaScript development. She has a BA in Computer Science and is currently working on a MA in Game Programming.

Leave a Reply