@patternfly/patternfly 4.151.4 → 4.152.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Tooltip/tooltip.css +18 -4
- package/components/Tooltip/tooltip.scss +42 -4
- package/docs/components/Tooltip/examples/Tooltip.md +56 -10
- package/package.json +1 -1
- package/patternfly-no-reset.css +18 -4
- package/patternfly.css +18 -4
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -26,26 +26,40 @@
|
|
|
26
26
|
max-width: var(--pf-c-tooltip--MaxWidth);
|
|
27
27
|
box-shadow: var(--pf-c-tooltip--BoxShadow);
|
|
28
28
|
}
|
|
29
|
-
.pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow {
|
|
29
|
+
.pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow {
|
|
30
30
|
bottom: 0;
|
|
31
31
|
left: 50%;
|
|
32
32
|
transform: translateX(var(--pf-c-tooltip__arrow--m-top--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-top--Rotate));
|
|
33
33
|
}
|
|
34
|
-
.pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow {
|
|
34
|
+
.pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
|
|
35
35
|
top: 0;
|
|
36
36
|
left: 50%;
|
|
37
37
|
transform: translateX(var(--pf-c-tooltip__arrow--m-bottom--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-bottom--Rotate));
|
|
38
38
|
}
|
|
39
|
-
.pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow {
|
|
39
|
+
.pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow {
|
|
40
40
|
top: 50%;
|
|
41
41
|
right: 0;
|
|
42
42
|
transform: translateX(var(--pf-c-tooltip__arrow--m-left--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-left--Rotate));
|
|
43
43
|
}
|
|
44
|
-
.pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow {
|
|
44
|
+
.pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
|
|
45
45
|
top: 50%;
|
|
46
46
|
left: 0;
|
|
47
47
|
transform: translateX(var(--pf-c-tooltip__arrow--m-right--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-right--Rotate));
|
|
48
48
|
}
|
|
49
|
+
.pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow {
|
|
50
|
+
top: var(--pf-c-tooltip__arrow--Height);
|
|
51
|
+
}
|
|
52
|
+
.pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
|
|
53
|
+
top: auto;
|
|
54
|
+
bottom: 0;
|
|
55
|
+
}
|
|
56
|
+
.pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow {
|
|
57
|
+
left: var(--pf-c-tooltip__arrow--Width);
|
|
58
|
+
}
|
|
59
|
+
.pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
|
|
60
|
+
right: 0;
|
|
61
|
+
left: auto;
|
|
62
|
+
}
|
|
49
63
|
|
|
50
64
|
.pf-c-tooltip__content {
|
|
51
65
|
position: relative;
|
|
@@ -32,7 +32,9 @@
|
|
|
32
32
|
max-width: var(--pf-c-tooltip--MaxWidth);
|
|
33
33
|
box-shadow: var(--pf-c-tooltip--BoxShadow);
|
|
34
34
|
|
|
35
|
-
&.pf-m-top
|
|
35
|
+
&.pf-m-top,
|
|
36
|
+
&.pf-m-top-left,
|
|
37
|
+
&.pf-m-top-right {
|
|
36
38
|
.pf-c-tooltip__arrow {
|
|
37
39
|
bottom: 0;
|
|
38
40
|
left: 50%;
|
|
@@ -40,7 +42,9 @@
|
|
|
40
42
|
}
|
|
41
43
|
}
|
|
42
44
|
|
|
43
|
-
&.pf-m-bottom
|
|
45
|
+
&.pf-m-bottom,
|
|
46
|
+
&.pf-m-bottom-left,
|
|
47
|
+
&.pf-m-bottom-right {
|
|
44
48
|
.pf-c-tooltip__arrow {
|
|
45
49
|
top: 0;
|
|
46
50
|
left: 50%;
|
|
@@ -48,7 +52,9 @@
|
|
|
48
52
|
}
|
|
49
53
|
}
|
|
50
54
|
|
|
51
|
-
&.pf-m-left
|
|
55
|
+
&.pf-m-left,
|
|
56
|
+
&.pf-m-left-top,
|
|
57
|
+
&.pf-m-left-bottom {
|
|
52
58
|
.pf-c-tooltip__arrow {
|
|
53
59
|
top: 50%;
|
|
54
60
|
right: 0;
|
|
@@ -56,13 +62,45 @@
|
|
|
56
62
|
}
|
|
57
63
|
}
|
|
58
64
|
|
|
59
|
-
&.pf-m-right
|
|
65
|
+
&.pf-m-right,
|
|
66
|
+
&.pf-m-right-top,
|
|
67
|
+
&.pf-m-right-bottom {
|
|
60
68
|
.pf-c-tooltip__arrow {
|
|
61
69
|
top: 50%;
|
|
62
70
|
left: 0;
|
|
63
71
|
transform: translateX(var(--pf-c-tooltip__arrow--m-right--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-right--Rotate));
|
|
64
72
|
}
|
|
65
73
|
}
|
|
74
|
+
|
|
75
|
+
&.pf-m-left-top,
|
|
76
|
+
&.pf-m-right-top {
|
|
77
|
+
.pf-c-tooltip__arrow {
|
|
78
|
+
top: var(--pf-c-tooltip__arrow--Height);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
&.pf-m-left-bottom,
|
|
83
|
+
&.pf-m-right-bottom {
|
|
84
|
+
.pf-c-tooltip__arrow {
|
|
85
|
+
top: auto;
|
|
86
|
+
bottom: 0;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
&.pf-m-top-left,
|
|
91
|
+
&.pf-m-bottom-left {
|
|
92
|
+
.pf-c-tooltip__arrow {
|
|
93
|
+
left: var(--pf-c-tooltip__arrow--Width);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
&.pf-m-top-right,
|
|
98
|
+
&.pf-m-bottom-right {
|
|
99
|
+
.pf-c-tooltip__arrow {
|
|
100
|
+
right: 0;
|
|
101
|
+
left: auto;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
66
104
|
}
|
|
67
105
|
|
|
68
106
|
.pf-c-tooltip__content {
|
|
@@ -60,6 +60,52 @@ cssPrefix: pf-c-tooltip
|
|
|
60
60
|
|
|
61
61
|
```
|
|
62
62
|
|
|
63
|
+
### Left with top and bottom positions
|
|
64
|
+
|
|
65
|
+
```html
|
|
66
|
+
<div class="pf-c-tooltip pf-m-left-top" role="tooltip">
|
|
67
|
+
<div class="pf-c-tooltip__arrow"></div>
|
|
68
|
+
|
|
69
|
+
<div
|
|
70
|
+
class="pf-c-tooltip__content"
|
|
71
|
+
id="tooltip-left-top-content"
|
|
72
|
+
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
|
|
73
|
+
</div>
|
|
74
|
+
<br />
|
|
75
|
+
<div class="pf-c-tooltip pf-m-left-bottom" role="tooltip">
|
|
76
|
+
<div class="pf-c-tooltip__arrow"></div>
|
|
77
|
+
|
|
78
|
+
<div
|
|
79
|
+
class="pf-c-tooltip__content"
|
|
80
|
+
id="tooltip-left-bottom-content"
|
|
81
|
+
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### Bottom with left and right positions
|
|
87
|
+
|
|
88
|
+
```html
|
|
89
|
+
<div class="pf-c-tooltip pf-m-bottom-left" role="tooltip">
|
|
90
|
+
<div class="pf-c-tooltip__arrow"></div>
|
|
91
|
+
|
|
92
|
+
<div
|
|
93
|
+
class="pf-c-tooltip__content"
|
|
94
|
+
id="tooltip-bottom-left-content"
|
|
95
|
+
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
|
|
96
|
+
</div>
|
|
97
|
+
<br />
|
|
98
|
+
<div class="pf-c-tooltip pf-m-bottom-right" role="tooltip">
|
|
99
|
+
<div class="pf-c-tooltip__arrow"></div>
|
|
100
|
+
|
|
101
|
+
<div
|
|
102
|
+
class="pf-c-tooltip__content"
|
|
103
|
+
id="tooltip-bottom-right-content"
|
|
104
|
+
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
|
|
105
|
+
</div>
|
|
106
|
+
|
|
107
|
+
```
|
|
108
|
+
|
|
63
109
|
### Left aligned text
|
|
64
110
|
|
|
65
111
|
```html
|
|
@@ -89,13 +135,13 @@ A tooltip is used to provide contextual information for another component on hov
|
|
|
89
135
|
|
|
90
136
|
### Usage
|
|
91
137
|
|
|
92
|
-
| Class
|
|
93
|
-
|
|
|
94
|
-
| `.pf-c-tooltip`
|
|
95
|
-
| `.pf-c-tooltip__arrow`
|
|
96
|
-
| `.pf-c-tooltip__content`
|
|
97
|
-
| `.pf-m-left`
|
|
98
|
-
| `.pf-m-right`
|
|
99
|
-
| `.pf-m-top`
|
|
100
|
-
| `.pf-m-bottom`
|
|
101
|
-
| `.pf-m-text-align-left`
|
|
138
|
+
| Class | Applied to | Outcome |
|
|
139
|
+
| --------------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------- |
|
|
140
|
+
| `.pf-c-tooltip` | `<div>` | Creates a tooltip. Always use with a modifier class that positions the tooltip relative to the element it describes. **Required** |
|
|
141
|
+
| `.pf-c-tooltip__arrow` | `<div>` | Creates an arrow pointing towards the element the tooltip describes. **Required** |
|
|
142
|
+
| `.pf-c-tooltip__content` | `<div>` | Creates the body of the tooltip. **Required** |
|
|
143
|
+
| `.pf-m-left{-top/bottom}` | `.pf-c-tooltip` | Positions the tooltip to the left (or left top/left bottom) of the element. |
|
|
144
|
+
| `.pf-m-right{-top/bottom}` | `.pf-c-tooltip` | Positions the tooltip to the right (or right top/right bottom) of the element. |
|
|
145
|
+
| `.pf-m-top{-left/right}` | `.pf-c-tooltip` | Positions the tooltip to the top (or top left/top right) of the element. |
|
|
146
|
+
| `.pf-m-bottom{-left/right}` | `.pf-c-tooltip` | Positions the tooltip to the bottom (or bottom left/bottom right) of the element. |
|
|
147
|
+
| `.pf-m-text-align-left` | `.pf-c-tooltip__content` | Modifies tooltip content to text align left. |
|
package/package.json
CHANGED
package/patternfly-no-reset.css
CHANGED
|
@@ -26237,26 +26237,40 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
26237
26237
|
max-width: var(--pf-c-tooltip--MaxWidth);
|
|
26238
26238
|
box-shadow: var(--pf-c-tooltip--BoxShadow);
|
|
26239
26239
|
}
|
|
26240
|
-
.pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow {
|
|
26240
|
+
.pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow {
|
|
26241
26241
|
bottom: 0;
|
|
26242
26242
|
left: 50%;
|
|
26243
26243
|
transform: translateX(var(--pf-c-tooltip__arrow--m-top--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-top--Rotate));
|
|
26244
26244
|
}
|
|
26245
|
-
.pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow {
|
|
26245
|
+
.pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
|
|
26246
26246
|
top: 0;
|
|
26247
26247
|
left: 50%;
|
|
26248
26248
|
transform: translateX(var(--pf-c-tooltip__arrow--m-bottom--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-bottom--Rotate));
|
|
26249
26249
|
}
|
|
26250
|
-
.pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow {
|
|
26250
|
+
.pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow {
|
|
26251
26251
|
top: 50%;
|
|
26252
26252
|
right: 0;
|
|
26253
26253
|
transform: translateX(var(--pf-c-tooltip__arrow--m-left--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-left--Rotate));
|
|
26254
26254
|
}
|
|
26255
|
-
.pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow {
|
|
26255
|
+
.pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
|
|
26256
26256
|
top: 50%;
|
|
26257
26257
|
left: 0;
|
|
26258
26258
|
transform: translateX(var(--pf-c-tooltip__arrow--m-right--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-right--Rotate));
|
|
26259
26259
|
}
|
|
26260
|
+
.pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow {
|
|
26261
|
+
top: var(--pf-c-tooltip__arrow--Height);
|
|
26262
|
+
}
|
|
26263
|
+
.pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
|
|
26264
|
+
top: auto;
|
|
26265
|
+
bottom: 0;
|
|
26266
|
+
}
|
|
26267
|
+
.pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow {
|
|
26268
|
+
left: var(--pf-c-tooltip__arrow--Width);
|
|
26269
|
+
}
|
|
26270
|
+
.pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
|
|
26271
|
+
right: 0;
|
|
26272
|
+
left: auto;
|
|
26273
|
+
}
|
|
26260
26274
|
|
|
26261
26275
|
.pf-c-tooltip__content {
|
|
26262
26276
|
position: relative;
|
package/patternfly.css
CHANGED
|
@@ -26373,26 +26373,40 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
26373
26373
|
max-width: var(--pf-c-tooltip--MaxWidth);
|
|
26374
26374
|
box-shadow: var(--pf-c-tooltip--BoxShadow);
|
|
26375
26375
|
}
|
|
26376
|
-
.pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow {
|
|
26376
|
+
.pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow {
|
|
26377
26377
|
bottom: 0;
|
|
26378
26378
|
left: 50%;
|
|
26379
26379
|
transform: translateX(var(--pf-c-tooltip__arrow--m-top--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-top--Rotate));
|
|
26380
26380
|
}
|
|
26381
|
-
.pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow {
|
|
26381
|
+
.pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
|
|
26382
26382
|
top: 0;
|
|
26383
26383
|
left: 50%;
|
|
26384
26384
|
transform: translateX(var(--pf-c-tooltip__arrow--m-bottom--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-bottom--Rotate));
|
|
26385
26385
|
}
|
|
26386
|
-
.pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow {
|
|
26386
|
+
.pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow {
|
|
26387
26387
|
top: 50%;
|
|
26388
26388
|
right: 0;
|
|
26389
26389
|
transform: translateX(var(--pf-c-tooltip__arrow--m-left--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-left--Rotate));
|
|
26390
26390
|
}
|
|
26391
|
-
.pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow {
|
|
26391
|
+
.pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
|
|
26392
26392
|
top: 50%;
|
|
26393
26393
|
left: 0;
|
|
26394
26394
|
transform: translateX(var(--pf-c-tooltip__arrow--m-right--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-right--Rotate));
|
|
26395
26395
|
}
|
|
26396
|
+
.pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow {
|
|
26397
|
+
top: var(--pf-c-tooltip__arrow--Height);
|
|
26398
|
+
}
|
|
26399
|
+
.pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
|
|
26400
|
+
top: auto;
|
|
26401
|
+
bottom: 0;
|
|
26402
|
+
}
|
|
26403
|
+
.pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow {
|
|
26404
|
+
left: var(--pf-c-tooltip__arrow--Width);
|
|
26405
|
+
}
|
|
26406
|
+
.pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
|
|
26407
|
+
right: 0;
|
|
26408
|
+
left: auto;
|
|
26409
|
+
}
|
|
26396
26410
|
|
|
26397
26411
|
.pf-c-tooltip__content {
|
|
26398
26412
|
position: relative;
|