Mercurial > nebulaweb3

comparison default/assets/scss/vendors/bootstrap/_tooltip.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
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 font-size: $font-size-sm;
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 .arrow {
18 position: absolute;
19 display: block;
20 width: $tooltip-arrow-width;
21 height: $tooltip-arrow-height;
22 }
23
24 &.bs-tooltip-top {
25 padding: $tooltip-arrow-width 0;
26 .arrow {
27 bottom: 0;
28 }
29
30 .arrow::before {
31 margin-left: -($tooltip-arrow-width - 2);
32 content: "";
33 border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
34 border-top-color: $tooltip-arrow-color;
35 }
36 }
37 &.bs-tooltip-right {
38 padding: 0 $tooltip-arrow-width;
39 .arrow {
40 left: 0;
41 }
42
43 .arrow::before {
44 margin-top: -($tooltip-arrow-width - 2);
45 content: "";
46 border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
47 border-right-color: $tooltip-arrow-color;
48 }
49 }
50 &.bs-tooltip-bottom {
51 padding: $tooltip-arrow-width 0;
52 .arrow {
53 top: 0;
54 }
55
56 .arrow::before {
57 margin-left: -($tooltip-arrow-width - 2);
58 content: "";
59 border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
60 border-bottom-color: $tooltip-arrow-color;
61 }
62 }
63 &.bs-tooltip-left {
64 padding: 0 $tooltip-arrow-width;
65 .arrow {
66 right: 0;
67 }
68
69 .arrow::before {
70 right: 0;
71 margin-top: -($tooltip-arrow-width - 2);
72 content: "";
73 border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
74 border-left-color: $tooltip-arrow-color;
75 }
76 }
77 &.bs-tooltip-auto {
78 &[x-placement^="top"] {
79 @extend .bs-tooltip-top;
80 }
81 &[x-placement^="right"] {
82 @extend .bs-tooltip-right;
83 }
84 &[x-placement^="bottom"] {
85 @extend .bs-tooltip-bottom;
86 }
87 &[x-placement^="left"] {
88 @extend .bs-tooltip-left;
89 }
90 }
91
92 .arrow::before {
93 position: absolute;
94 border-color: transparent;
95 border-style: solid;
96 }
97 }
98
99 // Wrapper for the tooltip content
100 .tooltip-inner {
101 max-width: $tooltip-max-width;
102 padding: $tooltip-padding-y $tooltip-padding-x;
103 color: $tooltip-color;
104 text-align: center;
105 background-color: $tooltip-bg;
106 @include border-radius($border-radius);
107 }