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
|
.pf-v6-c-tooltip {
--pf-v6-c-tooltip--MaxWidth: 18.75rem;
--pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
--pf-v6-c-tooltip__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
--pf-v6-c-tooltip__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
--pf-v6-c-tooltip__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
--pf-v6-c-tooltip__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
--pf-v6-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse);
--pf-v6-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
--pf-v6-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm);
--pf-v6-c-tooltip__content--BorderRadius: var(--pf-t--global--border--radius--small);
--pf-v6-c-tooltip__arrow--Width: 0.9375rem;
--pf-v6-c-tooltip__arrow--Height: 0.9375rem;
--pf-v6-c-tooltip__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
--pf-v6-c-tooltip__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
--pf-v6-c-tooltip__arrow--m-top--TranslateX: -50%;
--pf-v6-c-tooltip__arrow--m-top--TranslateY: 50%;
--pf-v6-c-tooltip__arrow--m-top--Rotate: 45deg;
--pf-v6-c-tooltip__arrow--m-right--TranslateX: -50%;
--pf-v6-c-tooltip__arrow--m-right--TranslateY: -50%;
--pf-v6-c-tooltip__arrow--m-right--Rotate: 45deg;
--pf-v6-c-tooltip__arrow--m-bottom--TranslateX: -50%;
--pf-v6-c-tooltip__arrow--m-bottom--TranslateY: -50%;
--pf-v6-c-tooltip__arrow--m-bottom--Rotate: 45deg;
--pf-v6-c-tooltip__arrow--m-left--TranslateX: 50%;
--pf-v6-c-tooltip__arrow--m-left--TranslateY: -50%;
--pf-v6-c-tooltip__arrow--m-left--Rotate: 45deg;
}
.pf-v6-c-tooltip {
position: relative;
max-width: var(--pf-v6-c-tooltip--MaxWidth);
box-shadow: var(--pf-v6-c-tooltip--BoxShadow);
}
.pf-v6-c-tooltip:is(.pf-m-top,
.pf-m-top-left,
.pf-m-top-right) {
--pf-v6-c-tooltip__arrow--InsetBlockEnd: var(--pf-v6-c-tooltip--m-top--InsetBlockEnd, 0);
--pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-top--InsetInlineStart, 50%);
--pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-top--TranslateX);
--pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
--pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-top--Rotate);
}
.pf-v6-c-tooltip:is(.pf-m-bottom,
.pf-m-bottom-left,
.pf-m-bottom-right) {
--pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-bottom--InsetBlockStart, 0);
--pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-bottom--InsetInlineStart, 50%);
--pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateX);
--pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateY);
--pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-bottom--Rotate);
}
.pf-v6-c-tooltip:is(.pf-m-left,
.pf-m-left-top,
.pf-m-left-bottom) {
--pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-left--InsetBlockStart, 50%);
--pf-v6-c-tooltip__arrow--InsetInlineEnd: var(--pf-v6-c-tooltip--m-left--InsetInlineEnd, 0);
--pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
--pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-left--TranslateY);
--pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-left--Rotate);
}
.pf-v6-c-tooltip:is(.pf-m-right,
.pf-m-right-top,
.pf-m-right-bottom) {
--pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-right--InsetBlockStart, 50%);
--pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-right--InsetInlineStart, 0);
--pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-right--TranslateX);
--pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-right--TranslateY);
--pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-right--Rotate);
}
.pf-v6-c-tooltip:is(.pf-m-left-top,
.pf-m-right-top) {
--pf-v6-c-tooltip__arrow--InsetBlockStart: 0;
--pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
}
.pf-v6-c-tooltip:is(.pf-m-left-bottom,
.pf-m-right-bottom) {
--pf-v6-c-tooltip__arrow--InsetBlockStart: auto;
--pf-v6-c-tooltip__arrow--InsetBlockEnd: 0;
}
.pf-v6-c-tooltip:is(.pf-m-top-left,
.pf-m-bottom-left) {
--pf-v6-c-tooltip__arrow--InsetInlineStart: 0;
--pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
}
.pf-v6-c-tooltip:is(.pf-m-top-right,
.pf-m-bottom-right) {
--pf-v6-c-tooltip__arrow--InsetInlineEnd: 0;
--pf-v6-c-tooltip__arrow--InsetInlineStart: auto;
}
.pf-v6-c-tooltip__content {
position: relative;
padding-block-start: var(--pf-v6-c-tooltip__content--PaddingBlockStart);
padding-block-end: var(--pf-v6-c-tooltip__content--PaddingBlockEnd);
padding-inline-start: var(--pf-v6-c-tooltip__content--PaddingInlineStart);
padding-inline-end: var(--pf-v6-c-tooltip__content--PaddingInlineEnd);
font-size: var(--pf-v6-c-tooltip__content--FontSize);
color: var(--pf-v6-c-tooltip__content--Color);
text-align: center;
word-break: break-word;
background-color: var(--pf-v6-c-tooltip__content--BackgroundColor);
border-radius: var(--pf-v6-c-tooltip__content--BorderRadius);
}
.pf-v6-c-tooltip__content.pf-m-text-align-left {
text-align: start;
}
.pf-v6-c-tooltip__arrow {
position: absolute;
top: var(--pf-v6-c-tooltip__arrow--InsetBlockStart, auto);
right: var(--pf-v6-c-tooltip__arrow--InsetInlineEnd, auto);
bottom: var(--pf-v6-c-tooltip__arrow--InsetBlockEnd, auto);
left: var(--pf-v6-c-tooltip__arrow--InsetInlineStart, auto);
width: var(--pf-v6-c-tooltip__arrow--Width);
height: var(--pf-v6-c-tooltip__arrow--Height);
pointer-events: none;
background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
transform: translateX(var(--pf-v6-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-tooltip__arrow--Rotate, 0));
}
|
