Reactstrap — Tooltips

Photo by Berkay Gumustekin on Unsplash

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add tooltips with Reactstrap.

Tooltips

We can add tooltips with Reactstrap.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Tooltip } from "reactstrap";
export default function App() {
  const [tooltipOpen, setTooltipOpen] = React.useState(false);
  const toggle = () => setTooltipOpen(!tooltipOpen);
  return (
    <div>
      <p>
        <span
          style={{ textDecoration: "underline", color: "blue" }}
          href="#"
          id="Tooltip"
        >
          tooltip
        </span>
      </p>
      <Tooltip
        placement="right"
        isOpen={tooltipOpen}
        target="Tooltip"
        toggle={toggle}
      >
        Hello world
      </Tooltip>
    </div>
  );
}

to add a tooltip trigger span element.

The id of the span should match the value of the target prop of the Tooltip .

The Tooltip component also takes the placement , isOpen and toggle props.