import "./Tooltip.css"

## Examples

### Top


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### Right


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### Bottom


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

### Left


import Example4 from './Example4.html?raw'

<LiveExample html={Example4} />

### Left with top and bottom positions


import Example5 from './Example5.html?raw'

<LiveExample html={Example5} />

### Bottom with left and right positions


import Example6 from './Example6.html?raw'

<LiveExample html={Example6} />

### Left aligned text


import Example7 from './Example7.html?raw'

<LiveExample html={Example7} />

## 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. |