1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
---
id: Tooltip
section: components
cssPrefix: pf-v6-c-tooltip
---import "./Tooltip.css"
## Examples
### Top
```html
<div class="pf-v6-c-tooltip pf-m-top" role="tooltip">
<div class="pf-v6-c-tooltip__arrow"></div>
<div
class="pf-v6-c-tooltip__content"
id="tooltip-top-content"
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
</div>
```
### Right
```html
<div class="pf-v6-c-tooltip pf-m-right" role="tooltip">
<div class="pf-v6-c-tooltip__arrow"></div>
<div
class="pf-v6-c-tooltip__content"
id="tooltip-right-content"
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
</div>
```
### Bottom
```html
<div class="pf-v6-c-tooltip pf-m-bottom" role="tooltip">
<div class="pf-v6-c-tooltip__arrow"></div>
<div
class="pf-v6-c-tooltip__content"
id="tooltip-bottom-content"
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
</div>
```
### Left
```html
<div class="pf-v6-c-tooltip pf-m-left" role="tooltip">
<div class="pf-v6-c-tooltip__arrow"></div>
<div
class="pf-v6-c-tooltip__content"
id="tooltip-left-content"
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
</div>
```
### Left with top and bottom positions
```html
<div class="pf-v6-c-tooltip pf-m-left-top" role="tooltip">
<div class="pf-v6-c-tooltip__arrow"></div>
<div
class="pf-v6-c-tooltip__content"
id="tooltip-left-top-content"
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
</div>
<br />
<div class="pf-v6-c-tooltip pf-m-left-bottom" role="tooltip">
<div class="pf-v6-c-tooltip__arrow"></div>
<div
class="pf-v6-c-tooltip__content"
id="tooltip-left-bottom-content"
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
</div>
```
### Bottom with left and right positions
```html
<div class="pf-v6-c-tooltip pf-m-bottom-left" role="tooltip">
<div class="pf-v6-c-tooltip__arrow"></div>
<div
class="pf-v6-c-tooltip__content"
id="tooltip-bottom-left-content"
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
</div>
<br />
<div class="pf-v6-c-tooltip pf-m-bottom-right" role="tooltip">
<div class="pf-v6-c-tooltip__arrow"></div>
<div
class="pf-v6-c-tooltip__content"
id="tooltip-bottom-right-content"
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
</div>
```
### Left aligned text
```html
<div class="pf-v6-c-tooltip pf-m-top" role="tooltip">
<div class="pf-v6-c-tooltip__arrow"></div>
<div
class="pf-v6-c-tooltip__content pf-m-text-align-left"
id="tooltip-text-align-left-example"
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
</div>
```
## 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. |
|
