1 | @import "mixins/settings.global";
|
2 |
|
3 | .c-tooltip {
|
4 | position: relative;
|
5 | overflow: visible;
|
6 |
|
7 | &:before,
|
8 | &:after {
|
9 | visibility: hidden;
|
10 | z-index: $z-over-page;
|
11 | }
|
12 |
|
13 | &:before {
|
14 | position: absolute;
|
15 | border: $tooltip-arrow-width solid transparent;
|
16 | content: "";
|
17 | }
|
18 |
|
19 | &:after {
|
20 | position: absolute;
|
21 | padding: .25em .5em;
|
22 | border: $tooltip-body-border-width $tooltip-body-border-style $tooltip-body-border-color;
|
23 | border-radius: $border-radius;
|
24 | background-color: $tooltip-body-background-color;
|
25 | color: $tooltip-body-color;
|
26 | line-height: $tooltip-line-height;
|
27 | white-space: nowrap;
|
28 | content: attr(aria-label);
|
29 | visibility: hidden;
|
30 | }
|
31 |
|
32 | &:hover:before,
|
33 | &:hover:after {
|
34 | visibility: visible;
|
35 | }
|
36 | }
|
37 |
|
38 | .c-tooltip--top {
|
39 | &:before {
|
40 | top: 0%;
|
41 | left: 50%;
|
42 | transform: translate(-50%, -1em);
|
43 | border-top-color: $tooltip-body-border-color;
|
44 | }
|
45 |
|
46 | &:after {
|
47 | top: 0%;
|
48 | left: 50%;
|
49 | transform: translate(-50%, -3em);
|
50 | }
|
51 | }
|
52 |
|
53 | .c-tooltip--right {
|
54 | &:before {
|
55 | top: 50%;
|
56 | left: 100%;
|
57 | transform: translate(0, -50%);
|
58 | border-right-color: $tooltip-body-border-color;
|
59 | }
|
60 |
|
61 | &:after {
|
62 | top: 50%;
|
63 | left: 100%;
|
64 | transform: translate(1em, -50%);
|
65 | }
|
66 | }
|
67 |
|
68 | .c-tooltip--bottom {
|
69 | &:before {
|
70 | bottom: 0;
|
71 | left: 50%;
|
72 | transform: translate(-50%, 1em);
|
73 | border-bottom-color: $tooltip-body-border-color;
|
74 | }
|
75 |
|
76 | &:after {
|
77 | bottom: 0;
|
78 | left: 50%;
|
79 | transform: translate(-50%, 3em);
|
80 | }
|
81 | }
|
82 |
|
83 | .c-tooltip--left {
|
84 | &:before {
|
85 | top: 50%;
|
86 | right: 100%;
|
87 | transform: translate(0, -50%);
|
88 | border-left-color: $tooltip-body-border-color;
|
89 | }
|
90 |
|
91 | &:after {
|
92 | top: 50%;
|
93 | right: 100%;
|
94 | transform: translate(-1em, -50%);
|
95 | }
|
96 | }
|