Skip to content

Commit fc8b85b

Browse files
Johann-SJohann-S
committed
Fix some css for the arrow of Popover/Tooltip + update documentation
1 parent 18e4e85 commit fc8b85b

File tree

5 files changed

+54
-56
lines changed

5 files changed

+54
-56
lines changed

‎docs/components/popovers.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -231,12 +231,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
231231
<tr>
232232
<td>template</td>
233233
<td>string</td>
234-
<td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="popover-arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
234+
<td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
235235
<td>
236236
<p>Base HTML to use when creating the popover.</p>
237237
<p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p>
238238
<p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p>
239-
<p><code>.popover-arrow</code> will become the popover's arrow.</p>
239+
<p><code>.arrow</code> will become the popover's arrow.</p>
240240
<p>The outermost wrapper element should have the <code>.popover</code> class.</p>
241241
</td>
242242
</tr>

‎docs/components/tooltips.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo
136136

137137
<!-- Generated markup by the plugin -->
138138
<div class="tooltip tooltip-top" role="tooltip">
139-
<div class="tooltip-arrow"></div>
139+
<div class="arrow"></div>
140140
<div class="tooltip-inner">
141141
Some tooltip text!
142142
</div>
@@ -209,11 +209,11 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
209209
<tr>
210210
<td>template</td>
211211
<td>string</td>
212-
<td><code>'&lt;div class="tooltip" role="tooltip"&gt;&lt;div class="tooltip-arrow"&gt;&lt;/div&gt;&lt;div class="tooltip-inner"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
212+
<td><code>'&lt;div class="tooltip" role="tooltip"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;div class="tooltip-inner"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
213213
<td>
214214
<p>Base HTML to use when creating the tooltip.</p>
215215
<p>The tooltip's <code>title</code> will be injected into the <code>.tooltip-inner</code>.</p>
216-
<p><code>.tooltip-arrow</code> will become the tooltip's arrow.</p>
216+
<p><code>.arrow</code> will become the tooltip's arrow.</p>
217217
<p>The outermost wrapper element should have the <code>.tooltip</code> class.</p>
218218
</td>
219219
</tr>

‎js/src/tooltip.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -289,7 +289,9 @@ const Tooltip = (($) => {
289289
}
290290
},
291291
onCreate : (data) => {
292-
this._handlePopperPlacementChange(data)
292+
if (data.originalPlacement !== data.placement) {
293+
this._handlePopperPlacementChange(data)
294+
}
293295
},
294296
onUpdate : (data) => {
295297
this._handlePopperPlacementChange(data)
@@ -644,10 +646,8 @@ const Tooltip = (($) => {
644646
}
645647

646648
_handlePopperPlacementChange(data) {
647-
if (data.originalPlacement !== data.placement) {
648649
this._cleanTipClass()
649650
this.addAttachmentClass(this._getAttachment(data.placement))
650-
}
651651
}
652652

653653
// static

‎scss/_popover.scss‎

Lines changed: 38 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -18,25 +18,47 @@
1818
@include border-radius($border-radius-lg);
1919
@include box-shadow($popover-box-shadow);
2020

21+
// Arrows
22+
//
23+
// .popover-arrow is outer, .popover-arrow::after is inner
24+
25+
.arrow::before,
26+
.arrow::after {
27+
position: absolute;
28+
display: block;
29+
width: 0;
30+
height: 0;
31+
border-color: transparent;
32+
border-style: solid;
33+
}
34+
35+
.arrow::before {
36+
content: "";
37+
border-width: $popover-arrow-outer-width;
38+
}
39+
.arrow::after {
40+
content: "";
41+
border-width: $popover-arrow-width;
42+
}
2143

2244
// Popover directions
2345

2446
&.bs-popover-top {
2547
margin-bottom: $popover-arrow-width;
2648

27-
::before,
28-
::after {
49+
.arrow::before,
50+
.arrow::after {
2951
left: 50%;
3052
border-bottom-width: 0;
3153
}
3254

33-
::before {
55+
.arrow::before {
3456
bottom: -$popover-arrow-outer-width;
3557
margin-left: -$popover-arrow-outer-width;
3658
border-top-color: $popover-arrow-outer-color;
3759
}
3860

39-
::after {
61+
.arrow::after {
4062
bottom: -($popover-arrow-outer-width - 1);
4163
margin-left: -$popover-arrow-width;
4264
border-top-color: $popover-arrow-color;
@@ -46,19 +68,19 @@
4668
&.bs-popover-right {
4769
margin-left: $popover-arrow-width;
4870

49-
::before,
50-
::after {
71+
.arrow::before,
72+
.arrow::after {
5173
top: 50%;
5274
border-left-width: 0;
5375
}
5476

55-
::before {
77+
.arrow::before {
5678
left: -$popover-arrow-outer-width;
5779
margin-top: -$popover-arrow-outer-width;
5880
border-right-color: $popover-arrow-outer-color;
5981
}
6082

61-
::after {
83+
.arrow::after {
6284
left: -($popover-arrow-outer-width - 1);
6385
margin-top: -($popover-arrow-outer-width - 1);
6486
border-right-color: $popover-arrow-color;
@@ -68,19 +90,19 @@
6890
&.bs-popover-bottom {
6991
margin-top: $popover-arrow-width;
7092

71-
::before,
72-
::after {
93+
.arrow::before,
94+
.arrow::after {
7395
left: 50%;
7496
border-top-width: 0;
7597
}
7698

77-
::before {
99+
.arrow::before {
78100
top: -$popover-arrow-outer-width;
79101
margin-left: -$popover-arrow-outer-width;
80102
border-bottom-color: $popover-arrow-outer-color;
81103
}
82104

83-
::after {
105+
.arrow::after {
84106
top: -($popover-arrow-outer-width - 1);
85107
margin-left: -$popover-arrow-width;
86108
border-bottom-color: $popover-arrow-color;
@@ -102,19 +124,19 @@
102124
&.bs-popover-left {
103125
margin-right: $popover-arrow-width;
104126

105-
::before,
106-
::after {
127+
.arrow::before,
128+
.arrow::after {
107129
top: 50%;
108130
border-right-width: 0;
109131
}
110132

111-
::before {
133+
.arrow::before {
112134
right: -$popover-arrow-outer-width;
113135
margin-top: -$popover-arrow-outer-width;
114136
border-left-color: $popover-arrow-outer-color;
115137
}
116138

117-
::after {
139+
.arrow::after {
118140
right: -($popover-arrow-outer-width - 1);
119141
margin-top: -($popover-arrow-outer-width - 1);
120142
border-left-color: $popover-arrow-color;
@@ -143,27 +165,3 @@
143165
padding: $popover-content-padding-y $popover-content-padding-x;
144166
color: $popover-content-color;
145167
}
146-
147-
148-
// Arrows
149-
//
150-
// .popover-arrow is outer, .popover-arrow::after is inner
151-
152-
.arrow::before,
153-
.arrow::after {
154-
position: absolute;
155-
display: block;
156-
width: 0;
157-
height: 0;
158-
border-color: transparent;
159-
border-style: solid;
160-
}
161-
162-
.arrow::before {
163-
content: "";
164-
border-width: $popover-arrow-outer-width;
165-
}
166-
.arrow::after {
167-
content: "";
168-
border-width: $popover-arrow-width;
169-
}

‎scss/_tooltip.scss‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,14 @@
6565
border-left-color: $tooltip-arrow-color;
6666
}
6767
}
68+
69+
.arrow::before {
70+
position: absolute;
71+
width: 0;
72+
height: 0;
73+
border-color: transparent;
74+
border-style: solid;
75+
}
6876
}
6977

7078
// Wrapper for the tooltip content
@@ -75,12 +83,4 @@
7583
text-align: center;
7684
background-color: $tooltip-bg;
7785
@include border-radius($border-radius);
78-
79-
.arrow::before {
80-
position: absolute;
81-
width: 0;
82-
height: 0;
83-
border-color: transparent;
84-
border-style: solid;
85-
}
8686
}

0 commit comments

Comments
 (0)