Skip to content

Commit 9600ab1

Browse files
simonihmigsimonihmig
committed
Fix tooltip/popover arrow size and position
1 parent 5cede31 commit 9600ab1

File tree

3 files changed

+50
-53
lines changed

3 files changed

+50
-53
lines changed

‎scss/_popover.scss‎

Lines changed: 30 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -26,96 +26,88 @@
2626
display: block;
2727
width: $popover-arrow-width;
2828
height: $popover-arrow-height;
29+
margin: 0 $border-radius-lg;
2930
}
3031

3132
.arrow::before,
3233
.arrow::after {
3334
position: absolute;
3435
display: block;
36+
content: "";
3537
border-color: transparent;
3638
border-style: solid;
3739
}
3840

39-
.arrow::before {
40-
content: "";
41-
border-width: $popover-arrow-width;
42-
}
43-
.arrow::after {
44-
content: "";
45-
border-width: $popover-arrow-width;
46-
}
47-
4841
// Popover directions
4942

5043
&.bs-popover-top {
51-
margin-bottom: $popover-arrow-width;
44+
margin-bottom: $popover-arrow-height;
5245

5346
.arrow {
54-
bottom: 0;
47+
bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
5548
}
5649

5750
.arrow::before,
5851
.arrow::after {
59-
border-bottom-width: 0;
52+
border-width: $popover-arrow-height $popover-arrow-width/2 0;
6053
}
6154

6255
.arrow::before {
63-
bottom: -$popover-arrow-width;
64-
margin-left: -$popover-arrow-width;
56+
bottom: 0;
6557
border-top-color: $popover-arrow-outer-color;
6658
}
6759

6860
.arrow::after {
69-
bottom: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
70-
margin-left: -$popover-arrow-width;
61+
bottom: $popover-border-width;
7162
border-top-color: $popover-arrow-color;
7263
}
7364
}
7465

7566
&.bs-popover-right {
76-
margin-left: $popover-arrow-width;
67+
margin-left: $popover-arrow-height;
7768

7869
.arrow {
79-
left: 0;
70+
left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
71+
width: $popover-arrow-height;
72+
height: $popover-arrow-width;
73+
margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
8074
}
8175

8276
.arrow::before,
8377
.arrow::after {
84-
margin-top: -$popover-arrow-width;
85-
border-left-width: 0;
78+
border-width: $popover-arrow-width/2 $popover-arrow-height $popover-arrow-width/2 0;
8679
}
8780

8881
.arrow::before {
89-
left: -$popover-arrow-width;
82+
left: 0;
9083
border-right-color: $popover-arrow-outer-color;
9184
}
9285

9386
.arrow::after {
94-
left: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
87+
left: $popover-border-width;
9588
border-right-color: $popover-arrow-color;
9689
}
9790
}
9891

9992
&.bs-popover-bottom {
100-
margin-top: $popover-arrow-width;
93+
margin-top: $popover-arrow-height;
10194

10295
.arrow {
103-
top: 0;
96+
top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
10497
}
10598

10699
.arrow::before,
107100
.arrow::after {
108-
margin-left: -$popover-arrow-width;
109-
border-top-width: 0;
101+
border-width: 0 $popover-arrow-width/2 $popover-arrow-height $popover-arrow-width/2;
110102
}
111103

112104
.arrow::before {
113-
top: -$popover-arrow-width;
105+
top: 0;
114106
border-bottom-color: $popover-arrow-outer-color;
115107
}
116108

117109
.arrow::after {
118-
top: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
110+
top: $popover-border-width;
119111
border-bottom-color: $popover-arrow-color;
120112
}
121113

@@ -125,33 +117,35 @@
125117
top: 0;
126118
left: 50%;
127119
display: block;
128-
width: 20px;
129-
margin-left: -10px;
120+
width: $popover-arrow-width;
121+
margin-left: -$popover-arrow-width/2;
130122
content: "";
131123
border-bottom: $popover-border-width solid $popover-header-bg;
132124
}
133125
}
134126

135127
&.bs-popover-left {
136-
margin-right: $popover-arrow-width;
128+
margin-right: $popover-arrow-height;
137129

138130
.arrow {
139-
right: 0;
131+
right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
132+
width: $popover-arrow-height;
133+
height: $popover-arrow-width;
134+
margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
140135
}
141136

142137
.arrow::before,
143138
.arrow::after {
144-
margin-top: -$popover-arrow-width;
145-
border-right-width: 0;
139+
border-width: $popover-arrow-width/2 0 $popover-arrow-width/2 $popover-arrow-height;
146140
}
147141

148142
.arrow::before {
149-
right: -$popover-arrow-width;
143+
right: 0;
150144
border-left-color: $popover-arrow-outer-color;
151145
}
152146

153147
.arrow::after {
154-
right: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
148+
right: $popover-border-width;
155149
border-left-color: $popover-arrow-color;
156150
}
157151
}

‎scss/_tooltip.scss‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -28,55 +28,58 @@
2828
}
2929

3030
&.bs-tooltip-top {
31-
padding: $tooltip-arrow-width 0;
31+
padding: $tooltip-arrow-height 0;
3232
.arrow {
3333
bottom: 0;
3434
}
3535

3636
.arrow::before {
37-
margin-left: -$tooltip-arrow-width;
37+
top: 0;
3838
content: "";
39-
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
39+
border-width: $tooltip-arrow-height $tooltip-arrow-width/2 0;
4040
border-top-color: $tooltip-arrow-color;
4141
}
4242
}
4343
&.bs-tooltip-right {
44-
padding: 0 $tooltip-arrow-width;
44+
padding: 0 $tooltip-arrow-height;
4545
.arrow {
4646
left: 0;
47+
width: $tooltip-arrow-height;
48+
height: $tooltip-arrow-width;
4749
}
4850

4951
.arrow::before {
50-
margin-top: -$tooltip-arrow-width;
52+
right: 0;
5153
content: "";
52-
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
54+
border-width: $tooltip-arrow-width/2 $tooltip-arrow-height $tooltip-arrow-width/2 0;
5355
border-right-color: $tooltip-arrow-color;
5456
}
5557
}
5658
&.bs-tooltip-bottom {
57-
padding: $tooltip-arrow-width 0;
59+
padding: $tooltip-arrow-height 0;
5860
.arrow {
5961
top: 0;
6062
}
6163

6264
.arrow::before {
63-
margin-left: -$tooltip-arrow-width;
65+
bottom: 0;
6466
content: "";
65-
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
67+
border-width: 0 $tooltip-arrow-width/2 $tooltip-arrow-height;
6668
border-bottom-color: $tooltip-arrow-color;
6769
}
6870
}
6971
&.bs-tooltip-left {
70-
padding: 0 $tooltip-arrow-width;
72+
padding: 0 $tooltip-arrow-height;
7173
.arrow {
7274
right: 0;
75+
width: $tooltip-arrow-height;
76+
height: $tooltip-arrow-width;
7377
}
7478

7579
.arrow::before {
76-
right: 0;
77-
margin-top: -($tooltip-arrow-width);
80+
left: 0;
7881
content: "";
79-
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
82+
border-width: $tooltip-arrow-width/2 0 $tooltip-arrow-width/2 $tooltip-arrow-height;
8083
border-left-color: $tooltip-arrow-color;
8184
}
8285
}

‎scss/_variables.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -682,8 +682,8 @@ $tooltip-padding-y: .25rem !default;
682682
$tooltip-padding-x: .5rem !default;
683683
$tooltip-margin: 0 !default;
684684

685-
$tooltip-arrow-width: .4rem !default;
686-
$tooltip-arrow-height: $tooltip-arrow-width !default;
685+
$tooltip-arrow-width: .8rem !default;
686+
$tooltip-arrow-height: .4rem !default;
687687
$tooltip-arrow-color: $tooltip-bg !default;
688688

689689

@@ -704,8 +704,8 @@ $popover-body-color: $body-color !default;
704704
$popover-body-padding-y: $popover-header-padding-y !default;
705705
$popover-body-padding-x: $popover-header-padding-x !default;
706706

707-
$popover-arrow-width: .8rem !default;
708-
$popover-arrow-height: .4rem !default;
707+
$popover-arrow-width: 1.6rem !default;
708+
$popover-arrow-height: .8rem !default;
709709
$popover-arrow-color: $popover-bg !default;
710710

711711
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;

0 commit comments

Comments
 (0)