Reactstrap — Tooltips

Image for post
Image for post
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:

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:

Tooltips Placement

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

So we can write:

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:

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:

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

Image for post
Image for post
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.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/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