Reactstrap — Tooltips

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.

isOpen has the open state of the tooltip.

toggle has the function to toggle the tooltip.

Tooltip Disable Autohide

We can disable autohide with the autohide prop set to false .

So 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}
        autohide={false}
      >
        Hello world
      </Tooltip>
    </div>
  );
}

Tooltips Placement

We can change the placement of the tooltip with the placement prop.

So 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="bottom"
        isOpen={tooltipOpen}
        target="Tooltip"
        toggle={toggle}
      >
        Hello world
      </Tooltip>
    </div>
  );
}

We can set the placement prop to left , right , bottom or top .

Uncontrolled Tooltip

We can add the UncontrolledTooltip to add a tooltip if we don’t need to control the tooltip state programmatically.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { UncontrolledTooltip } from "reactstrap";

export default function App() {
  return (
    <div>
      <p>
        <span
          style={{ textDecoration: "underline", color: "blue" }}
          href="#"
          id="Tooltip"
        >
          tooltip
        </span>
      </p>
      <UncontrolledTooltip placement="right" target="Tooltip">
        Hello world
      </UncontrolledTooltip>
    </div>
  );
}

to add the UncontrolledTooltip component.

The id of the trigger element should match the target of the UncontrolledTooltip .

Repositioning Tooltips

A tooltip can be repositioned on the fly with the scgheduleUpdate function.

For instance, if we toggle between short and long text in our tooltip as follows:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { UncontrolledTooltip } from "reactstrap";

const shortText = "Hi";
const longText =
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus fermentum lacus";

const TooltipContent = ({ scheduleUpdate }) => {
  const [text, setText] = React.useState(shortText);

  React.useEffect(() => {
    const intervalId = setInterval(() => {
      setText(text === shortText ? longText : shortText);
      scheduleUpdate();
    }, 2000);

    return () => clearInterval(intervalId);
  });

  return <>{text}</>;
};

export default function App() {
  return (
    <div>
      <p>
        <span
          style={{ textDecoration: "underline", color: "blue" }}
          href="#"
          id="Tooltip"
        >
          tooltip
        </span>
      </p>
      <UncontrolledTooltip placement="top" target="Tooltip" trigger="click">
        {({ scheduleUpdate }) => (
          <TooltipContent scheduleUpdate={scheduleUpdate} />
        )}
      </UncontrolledTooltip>
    </div>
  );
}

Then if we run scheduleUpdate as we did in the setInterval callback, we’ll see the tooltip automatically reposition itself as the text changes.

Conclusion

We can add a tooltip either as a controlled or uncontrolled components.

They can be repositioned on the fly.