source: trip-planner-front/node_modules/bootstrap/scss/_tooltip.scss@ 6a3a178

Last change on this file since 6a3a178 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 2.5 KB
Line 
1// Base class
2.tooltip {
3 position: absolute;
4 z-index: $zindex-tooltip;
5 display: block;
6 margin: $tooltip-margin;
7 // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
8 // So reset our font and text properties to avoid inheriting weird values.
9 @include reset-text();
10 @include font-size($tooltip-font-size);
11 // Allow breaking very long words so they don't overflow the tooltip's bounds
12 word-wrap: break-word;
13 opacity: 0;
14
15 &.show { opacity: $tooltip-opacity; }
16
17 .tooltip-arrow {
18 position: absolute;
19 display: block;
20 width: $tooltip-arrow-width;
21 height: $tooltip-arrow-height;
22
23 &::before {
24 position: absolute;
25 content: "";
26 border-color: transparent;
27 border-style: solid;
28 }
29 }
30}
31
32.bs-tooltip-top {
33 padding: $tooltip-arrow-height 0;
34
35 .tooltip-arrow {
36 bottom: 0;
37
38 &::before {
39 top: -1px;
40 border-width: $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
41 border-top-color: $tooltip-arrow-color;
42 }
43 }
44}
45
46.bs-tooltip-end {
47 padding: 0 $tooltip-arrow-height;
48
49 .tooltip-arrow {
50 left: 0;
51 width: $tooltip-arrow-height;
52 height: $tooltip-arrow-width;
53
54 &::before {
55 right: -1px;
56 border-width: ($tooltip-arrow-width * .5) $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
57 border-right-color: $tooltip-arrow-color;
58 }
59 }
60}
61
62.bs-tooltip-bottom {
63 padding: $tooltip-arrow-height 0;
64
65 .tooltip-arrow {
66 top: 0;
67
68 &::before {
69 bottom: -1px;
70 border-width: 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
71 border-bottom-color: $tooltip-arrow-color;
72 }
73 }
74}
75
76.bs-tooltip-start {
77 padding: 0 $tooltip-arrow-height;
78
79 .tooltip-arrow {
80 right: 0;
81 width: $tooltip-arrow-height;
82 height: $tooltip-arrow-width;
83
84 &::before {
85 left: -1px;
86 border-width: ($tooltip-arrow-width * .5) 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
87 border-left-color: $tooltip-arrow-color;
88 }
89 }
90}
91
92.bs-tooltip-auto {
93 &[data-popper-placement^="top"] {
94 @extend .bs-tooltip-top;
95 }
96 &[data-popper-placement^="right"] {
97 @extend .bs-tooltip-end;
98 }
99 &[data-popper-placement^="bottom"] {
100 @extend .bs-tooltip-bottom;
101 }
102 &[data-popper-placement^="left"] {
103 @extend .bs-tooltip-start;
104 }
105}
106
107// Wrapper for the tooltip content
108.tooltip-inner {
109 max-width: $tooltip-max-width;
110 padding: $tooltip-padding-y $tooltip-padding-x;
111 color: $tooltip-color;
112 text-align: center;
113 background-color: $tooltip-bg;
114 @include border-radius($tooltip-border-radius);
115}
Note: See TracBrowser for help on using the repository browser.