---
title: React Tooltip Component
name: Tooltip
description: Documentation and examples for adding React Tooltips.
route: /components/tooltip/
other_frameworks: tooltip
---

## Examples

### Tooltips on links

Hover over the links below to see tooltips:

<ExampleSnippet className="text-body-secondary" component="TooltipOnLinksExample" componentName="React Tooltip" />

### Custom tooltips

You can customize the appearance of tooltips using [CSS variables](./styling/#css-variables). We set a custom `style` to scope our custom appearance and use it to override some of the local CSS variables.

<ExampleSnippet className="text-body-secondary" component="TooltipCustomExample" componentName="React Tooltip" />

### Directions

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using CoreUI in RTL.

<ExampleSnippet className="text-body-secondary" component="TooltipDirectionsExample" componentName="React Tooltip" />

## Usage

### Disabled elements

Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`.

<ExampleSnippet className="text-body-secondary" component="TooltipDisabledElementsExample" componentName="React Tooltip" />

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CTooltip /&gt;](./api/#ctooltip)
