# Tooltip

**Kind:** Class

A component that renders a tooltip on hover. Wraps its children.

[[ Story id="tooltip--example" title="Tooltip example" ]]

---

## TooltipProps

**Kind:** Interface

Props for the `Tooltip` component.

### Properties

#### `children`

Type: `ReactElement<TooltipAnchorProps>`

Child components to render.

#### `className?`

Type: `undefined | string`

Additional class names to attach to the tooltip, separated by spaces.

#### `content?`

Type: `string | object`

A string representing the contents. Alternatively, you can include a function that returns a React node to place into the tooltip, which is useful for things like italicization in the tooltip.

#### `disabled?`

Type: `undefined | false | true`

If set to `true`, this tooltip will not be shown. Useful when trying to disable the tooltip dynamically.

#### `fitInWindowMode?`

Type: `FitInWindowMode`

Dictates the behavior when the "normal" placement of the tooltip would be outside of the viewport. Defaults to `FitInWindowModes.FLIP`.

#### `placementOffsetX?`

Type: `undefined | number`

The horizontal offset, in pixels, of the tooltip. If `placementX` is set to `PopoverPlacements.LEFT`, a higher number will move the tooltip to the left. If `placementX` is set to `PopoverPlacements.RIGHT`, a higher number moves the tooltip to the right. If `placementX` is set to `PopoverPlacements.CENTER`, this value has no effect. Defaults to 12.

#### `placementOffsetY?`

Type: `undefined | number`

The vertical offset, in pixels, of the tooltip. If `placementY` is set to `PopoverPlacements.TOP`, a higher number will move the tooltip upward. If `placementY` is set to `PopoverPlacements.BOTTOM`, a higher number moves the tooltip downard. If `placementY` is set to `PopoverPlacements.CENTER`, this value has no effect. Defaults to 0.

#### `placementX?`

Type: `PopoverPlacementX`

The horizontal placement of the tooltip. Defaults to `PopoverPlacements.RIGHT`.

#### `placementY?`

Type: `PopoverPlacementY`

The vertical placement of the tooltip. Defaults to `PopoverPlacements.CENTER`.

#### `shouldHideTooltipOnClick?`

Type: `undefined | false | true`

Should the tooltip be hidden when clicked? Defaults to `false`.

#### `style?`

Type: `React.CSSProperties`

Additional styles names to attach to the tooltip.