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.

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.

Photo by Anna Dudkova on Unsplash

Conclusion

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

They can be repositioned on the fly.

Web developer. Subscribe to my email list now at https://thewebdev.info/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store