Skip to content

Commit aa36439

Browse files
Johann-SJohann-S
committed
Use Popper.js to manage arrow position
1 parent 3706c88 commit aa36439

File tree

5 files changed

+58
-31
lines changed

5 files changed

+58
-31
lines changed

‎js/src/popover.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const Popover = (($) => {
3030
trigger : 'click',
3131
content : '',
3232
template : '<div class="popover" role="tooltip">'
33-
+ '<div class="arrow"></div>'
33+
+ '<div class="arrow" x-arrow></div>'
3434
+ '<h3 class="popover-title"></h3>'
3535
+ '<div class="popover-content"></div></div>'
3636
})

‎js/src/tooltip.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const Tooltip = (($) => {
6060
const Default = {
6161
animation : true,
6262
template : '<div class="tooltip" role="tooltip">'
63-
+ '<div class="arrow"></div>'
63+
+ '<div class="arrow" x-arrow></div>'
6464
+ '<div class="tooltip-inner"></div></div>',
6565
trigger : 'hover focus',
6666
title : '',

‎scss/_popover.scss‎

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,19 @@
2020

2121
// Arrows
2222
//
23-
// .popover-arrow is outer, .popover-arrow::after is inner
23+
// .arrow is outer, .arrow::after is inner
24+
25+
.arrow {
26+
position: absolute;
27+
display: block;
28+
width: $popover-arrow-width;
29+
height: $popover-arrow-height;
30+
}
2431

2532
.arrow::before,
2633
.arrow::after {
2734
position: absolute;
2835
display: block;
29-
width: 0;
30-
height: 0;
3136
border-color: transparent;
3237
border-style: solid;
3338
}
@@ -38,73 +43,80 @@
3843
}
3944
.arrow::after {
4045
content: "";
41-
border-width: $popover-arrow-width;
46+
border-width: $popover-arrow-outer-width;
4247
}
4348

4449
// Popover directions
4550

4651
&.bs-popover-top {
4752
margin-bottom: $popover-arrow-width;
4853

54+
.arrow {
55+
bottom: 0;
56+
}
57+
4958
.arrow::before,
5059
.arrow::after {
51-
left: 50%;
5260
border-bottom-width: 0;
5361
}
5462

5563
.arrow::before {
5664
bottom: -$popover-arrow-outer-width;
57-
margin-left: -$popover-arrow-outer-width;
65+
margin-left: -($popover-arrow-outer-width - 5);
5866
border-top-color: $popover-arrow-outer-color;
5967
}
6068

6169
.arrow::after {
6270
bottom: -($popover-arrow-outer-width - 1);
63-
margin-left: -$popover-arrow-width;
71+
margin-left: -($popover-arrow-outer-width - 5);
6472
border-top-color: $popover-arrow-color;
6573
}
6674
}
6775

6876
&.bs-popover-right {
6977
margin-left: $popover-arrow-width;
7078

79+
.arrow {
80+
left: 0;
81+
}
82+
7183
.arrow::before,
7284
.arrow::after {
73-
top: 50%;
85+
margin-top: -($popover-arrow-outer-width - 3);
7486
border-left-width: 0;
7587
}
7688

7789
.arrow::before {
7890
left: -$popover-arrow-outer-width;
79-
margin-top: -$popover-arrow-outer-width;
8091
border-right-color: $popover-arrow-outer-color;
8192
}
8293

8394
.arrow::after {
8495
left: -($popover-arrow-outer-width - 1);
85-
margin-top: -($popover-arrow-outer-width - 1);
8696
border-right-color: $popover-arrow-color;
8797
}
8898
}
8999

90100
&.bs-popover-bottom {
91101
margin-top: $popover-arrow-width;
92102

103+
.arrow {
104+
top: 0;
105+
}
106+
93107
.arrow::before,
94108
.arrow::after {
95-
left: 50%;
109+
margin-left: -($popover-arrow-width - 3);
96110
border-top-width: 0;
97111
}
98112

99113
.arrow::before {
100114
top: -$popover-arrow-outer-width;
101-
margin-left: -$popover-arrow-outer-width;
102115
border-bottom-color: $popover-arrow-outer-color;
103116
}
104117

105118
.arrow::after {
106119
top: -($popover-arrow-outer-width - 1);
107-
margin-left: -$popover-arrow-width;
108120
border-bottom-color: $popover-arrow-color;
109121
}
110122

@@ -124,21 +136,23 @@
124136
&.bs-popover-left {
125137
margin-right: $popover-arrow-width;
126138

139+
.arrow {
140+
right: 0;
141+
}
142+
127143
.arrow::before,
128144
.arrow::after {
129-
top: 50%;
145+
margin-top: -($popover-arrow-outer-width - 3);
130146
border-right-width: 0;
131147
}
132148

133149
.arrow::before {
134150
right: -$popover-arrow-outer-width;
135-
margin-top: -$popover-arrow-outer-width;
136151
border-left-color: $popover-arrow-outer-color;
137152
}
138153

139154
.arrow::after {
140155
right: -($popover-arrow-outer-width - 1);
141-
margin-top: -($popover-arrow-outer-width - 1);
142156
border-left-color: $popover-arrow-color;
143157
}
144158
}

‎scss/_tooltip.scss‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,49 +14,61 @@
1414

1515
&.show { opacity: $tooltip-opacity; }
1616

17+
.arrow {
18+
position: absolute;
19+
display: block;
20+
width: $tooltip-arrow-width;
21+
height: $tooltip-arrow-height;
22+
}
23+
1724
&.bs-tooltip-top {
1825
padding: $tooltip-arrow-width 0;
26+
.arrow {
27+
bottom: 0;
28+
}
1929

2030
.arrow::before {
21-
bottom: 0;
22-
left: 50%;
23-
margin-left: -$tooltip-arrow-width;
31+
margin-left: -($tooltip-arrow-width - 2);
2432
content: "";
2533
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
2634
border-top-color: $tooltip-arrow-color;
2735
}
2836
}
2937
&.bs-tooltip-right {
3038
padding: 0 $tooltip-arrow-width;
39+
.arrow {
40+
left: 0;
41+
}
3142

3243
.arrow::before {
33-
top: 50%;
34-
left: 0;
35-
margin-top: -$tooltip-arrow-width;
44+
margin-top: -($tooltip-arrow-width - 2);
3645
content: "";
3746
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
3847
border-right-color: $tooltip-arrow-color;
3948
}
4049
}
4150
&.bs-tooltip-bottom {
4251
padding: $tooltip-arrow-width 0;
52+
.arrow {
53+
top: 0;
54+
}
4355

4456
.arrow::before {
45-
top: 0;
46-
left: 50%;
47-
margin-left: -$tooltip-arrow-width;
57+
margin-left: -($tooltip-arrow-width - 2);
4858
content: "";
4959
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
5060
border-bottom-color: $tooltip-arrow-color;
5161
}
5262
}
5363
&.bs-tooltip-left {
5464
padding: 0 $tooltip-arrow-width;
65+
.arrow {
66+
right: 0;
67+
}
5568

5669
.arrow::before {
57-
top: 50%;
5870
right: 0;
59-
margin-top: -$tooltip-arrow-width;
71+
margin-top: -($tooltip-arrow-width - 2);
6072
content: "";
6173
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
6274
border-left-color: $tooltip-arrow-color;
@@ -65,8 +77,6 @@
6577

6678
.arrow::before {
6779
position: absolute;
68-
width: 0;
69-
height: 0;
7080
border-color: transparent;
7181
border-style: solid;
7282
}

‎scss/_variables.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -698,7 +698,9 @@ $tooltip-padding-y: 3px !default;
698698
$tooltip-padding-x: 8px !default;
699699
$tooltip-margin: 0 !default;
700700

701+
701702
$tooltip-arrow-width: 5px !default;
703+
$tooltip-arrow-height: 5px !default;
702704
$tooltip-arrow-color: $tooltip-bg !default;
703705

704706

@@ -721,6 +723,7 @@ $popover-content-padding-y: 9px !default;
721723
$popover-content-padding-x: 14px !default;
722724

723725
$popover-arrow-width: 10px !default;
726+
$popover-arrow-height: 5px !default;
724727
$popover-arrow-color: $popover-bg !default;
725728

726729
$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default;

0 commit comments

Comments
 (0)