How to Display Tooltip in React Bootstrap

May 12, 2020 • 8 Minute Read

Introduction

You can use tooltips to provide further context for the elements of your app. However, although tooltip is considered a simple and effective element, it can be challenging to implement. For starters, you must consider various factors such as positioning, responsive layouts, and different browsers' support. Luckily, you have several libraries that may help you. This guide covers four of the most popular libraries for displaying tooltips within React apps: React Tooltip, Material UI, Bootstrap, and Semantic UI.

This guide requires that you are familiar with React components and that you know how to use props and states to manipulate them.

Selecting Tooltip Library

The libraries that this guide covers provide significant tooltip components. With each of these libraries, you can add a tooltip, set its content, and configure its setting and style.

Choose React Tooltip if you need a tooltip component for your React app and are not looking for other elements on board. React Tooltip is a tiny library that includes only a tooltip component, while the other options presented in this guide are huge UI libraries that offer many other components.

If you need a variety of elements with the same look and feel, you may want to deploy Material UI, Bootstrap, and Semantic UI. Your decision may depend on the requirements and preferences of each individual project.

React Tooltip

React Tooltip offers a tooltip component only. Start by adding React Tooltip to a project:

      # add with npm
npm install react-tooltip
# or with yarn
yarn add react-tooltip
    

Then, use the ReactTooltip component to display tooltips as follows:

      import React from "react";

import ReactTooltip from "react-tooltip";

export default function App() {
  return (
    <div className="App">
      <button data-tip data-for="registerTip">
        Register
      </button>

      <ReactTooltip id="registerTip" place="top" effect="solid">
        Tooltip for the register button
      </ReactTooltip>
    </div>
  );
}
    

The example above starts by importing the ReactTooltip component. ReactTooltip is used to render the content of the tooltip. Remember to specify the id property for the tooltip and the content. Define the position of the tooltip using the place and effect properties. Now, you must mark the element you wish to display the tooltip for. To achieve this, use data-tip and data-for custom attributes. Although you may show tooltips for any element of your choice, the examples in this guide cover specifying these attributes for the <button> element.

Use the data-tip attribute to help React Tooltip find the element. The data-for attribute includes the id of the ReactTooltip component that you declared earlier.

Refer to the API description in the GitHub repository and additional examples on the official site for more information regarding the libraries' other options regarding manipulating the position, events, and style of the tooltip .

Material UI

Material-UI is a combination of React components inspired by the Material Design offered by Google that you may use in your React apps. Material-UI includes a Tooltip component that you can utilize to display tooltips.

In order to display a basic tooltip with Material UI, do as follows:

      import React from "react";

import Button from "@material-ui/core/Button";
import Tooltip from "@material-ui/core/Tooltip";

export default function App() {
  return (
    <div className="App">
      <Tooltip
        title="Tooltip for the register button"
        placement="top"
      >
        <Button variant="contained">Register</Button>
      </Tooltip>
    </div>
  );
}
    

As shown above, start by importing the Button and Tooltip components. Proceed to wrap the button that you wish to display a tooltip for with the Tooltip component. Set the properties for the tooltip; the title and placement properties define the text to display and position respectively.

Refer to the official site for more tooltip examples.

Bootstrap

Bootstrap is without question one of the most popular frameworks for developing web apps. It encompasses a collection of components that enable you to display overlays, tooltips, and popovers.

Check out the following example of using React Bootstrap to display the Bootstrap tooltip:

      import React from "react";

import "bootstrap/dist/css/bootstrap.css";

import Button from "react-bootstrap/Button";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Tooltip from "react-bootstrap/Tooltip";

export default function App() {
  const renderTooltip = props => (
    <Tooltip {...props}>Tooltip for the register button</Tooltip>
  );

  return (
    <div className="App">
      <OverlayTrigger placement="top" overlay={renderTooltip}>
        <Button>Register</Button>
      </OverlayTrigger>
    </div>
  );
}
    

Begin by importing the Button, Tooltip, and OverlayTrigger components. Do not forget to import the Bootstrap CSS file for the default theme as well.

The Tooltip component in Bootstrap uses the OverlayTrigger component to position itself because it does not position itself by default. In order to show the tooltip for the button, you must wrap the Button with the OverlayTrigger component. Use the placement property of the overlay to set the position of the tooltip. Furthermore, use the overlay property to set the content you wish to render for the tooltip.

The renderTooltip function that you specified for the overlay property returns the Tooltip component with tooltip's content.

Refer to the official site for more tooltip examples.

Semantic UI

Semantic UI is a prevalent UI framework with its own tooltip component that you can utilize in your React apps.

The following is an example of using the Semantic UI Popup component to display a tooltip:

      import React from "react";

import "semantic-ui-css/semantic.min.css";

import { Button, Popup } from "semantic-ui-react";

export default function App() {
  return (
    <div className="App">
      <Popup
        trigger={<Button>Register</Button>}
        position="top center"
      >
        Tooltip for the register button
      </Popup>
    </div>
  );
}
    

First, import the Button and Popup components. For default styling, remember to import the Semantic UI semantic.min.css file as well.

Use the Popup component to render the tooltip. Set the trigger property to determine the component you wish to include the tooltip for. Furthermore, experiment with the position property to set the position of the tooltip. To set the tooltip's content, modify the content within the Popup component.

Conclusion

Tooltips offer an effective yet tricky way to display extra content for UI elements. This guide covered four different approaches to including tooltips in your React apps. You can try out these four libraries and choose the one that suits your preferences and designs.