/
tooltip.css
105 lines (105 loc) 路 2.42 KB
/
tooltip.css
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
.tooltip {
@apply relative inline-block text-center;
--tooltip-tail: 3px;
--tooltip-color: hsl(var(--n));
--tooltip-text-color: hsl(var(--nc));
--tooltip-tail-offset: calc(100% + 1px - var(--tooltip-tail));
}
.tooltip:before,
.tooltip:after {
@apply opacity-0 transition delay-100 duration-200 ease-in-out;
}
.tooltip:after {
@apply absolute;
}
.tooltip:before {
@apply max-w-xs rounded px-2 py-1 text-sm;
background-color: var(--tooltip-color);
color: var(--tooltip-text-color);
width: max-content;
}
.tooltip.tooltip-open:before,
.tooltip.tooltip-open:after,
.tooltip:hover:before,
.tooltip:hover:after {
@apply opacity-100 delay-75;
}
.tooltip:after {
content: "";
border-style: solid;
border-width: var(--tooltip-tail, 0);
width: 0;
height: 0;
display: block;
position: absolute;
}
.tooltip, .tooltip-top {
&:after {
transform: translateX(-50%);
border-color: var(--tooltip-color) transparent transparent transparent;
top: auto;
left: 50%;
right: auto;
bottom: var(--tooltip-tail-offset);
}
}
.tooltip-bottom {
&:after {
transform: translateX(-50%);
border-color: transparent transparent var(--tooltip-color) transparent;
top: var(--tooltip-tail-offset);
left: 50%;
right: auto;
bottom: auto;
}
}
.tooltip-left {
&:after {
transform: translateY(-50%);
border-color: transparent transparent transparent var(--tooltip-color);
top: 50%;
left: auto;
right: calc(var(--tooltip-tail-offset) + 1px);
bottom: auto;
}
}
.tooltip-right {
&:after {
transform: translateY(-50%);
border-color: transparent var(--tooltip-color) transparent transparent;
top: 50%;
left: calc(var(--tooltip-tail-offset) + 1px);
right: auto;
bottom: auto;
}
}
.tooltip {
&-primary {
--tooltip-color: hsl(var(--p));
--tooltip-text-color: hsl(var(--pc));
}
&-secondary {
--tooltip-color: hsl(var(--s));
--tooltip-text-color: hsl(var(--sc));
}
&-accent {
--tooltip-color: hsl(var(--a));
--tooltip-text-color: hsl(var(--ac));
}
&-info {
--tooltip-color: hsla(var(--in));
--tooltip-text-color: hsl(var(--inc));
}
&-success {
--tooltip-color: hsla(var(--su));
--tooltip-text-color: hsl(var(--suc));
}
&-warning {
--tooltip-color: hsla(var(--wa));
--tooltip-text-color: hsl(var(--wac));
}
&-error {
--tooltip-color: hsla(var(--er));
--tooltip-text-color: hsl(var(--erc));
}
}