React Bootstrap Tooltip Component

Tooltip with Bootstrap Styling

Bootstrap 5 components designed for React.js

This component is part of the CoreUI for React.js UI components library, which offers all Bootstrap components designed to work seamlessly with React.js.

If you want to use Bootstrap 5 in a React.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.

Learn how to add Bootstrap-style tooltips in your React app using CoreUI components styled to match Bootstrap.

On this page

Use CoreUI's React components styled with Bootstrap to show additional contextual information when users hover over elements, similar to native Bootstrap tooltips.

Tooltips on links#

Hover over the links below to see Bootstrap-style tooltips.

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Custom tooltips#

You can customize the appearance of tooltips using CSS variables. Below is an example with scoped overrides for a unique appearance.

You can place tooltips on the top, right, bottom, or left of the element. Directions are automatically mirrored in RTL layouts.

Disabled elements#

Because disabled elements do not trigger events, wrap them in a <span> or <div> with tabIndex="0" to enable tooltip behavior.

API reference#

Refer to the API documentation for detailed descriptions of all available props and customization options.

<CTooltip />