- React
- HTML

import ”./Tooltip.css”

## Examples

### Top

### Right

### Bottom

### Left

### Left with top and bottom positions

### Bottom with left and right positions

### Left aligned text

## Documentation

### Overview

A tooltip is used to provide contextual information for another component on hover. The tooltip itself is made up of two elements: arrow and content. One of the directional modifiers (`.pf-m-left`, `.pf-m-top`, etc.) is required on the tooltip component.

### Usage

Class | Applied to | Outcome
--- | --- | ---
`.pf-v6-c-tooltip` | `<div>` | Creates a tooltip. Always use with a modifier class that positions the tooltip relative to the element it describes. Required
`.pf-v6-c-tooltip__arrow` | `<div>` | Creates an arrow pointing towards the element the tooltip describes. Required
`.pf-v6-c-tooltip__content` | `<div>` | Creates the body of the tooltip. Required
`.pf-m-left{-top/bottom}` | `.pf-v6-c-tooltip` | Positions the tooltip to the left (or left top/left bottom) of the element.
`.pf-m-right{-top/bottom}` | `.pf-v6-c-tooltip` | Positions the tooltip to the right (or right top/right bottom) of the element.
`.pf-m-top{-left/right}` | `.pf-v6-c-tooltip` | Positions the tooltip to the top (or top left/top right) of the element.
`.pf-m-bottom{-left/right}` | `.pf-v6-c-tooltip` | Positions the tooltip to the bottom (or bottom left/bottom right) of the element.
`.pf-m-text-align-left` | `.pf-v6-c-tooltip__content` | Modifies tooltip content to text align left.

##
CSS variables