Skip to content

Commit 865a655

Browse files
jacobmllr95jacobmllr95
authored
fix(b-tooltip): fix arrow margin (bootstrap-vue#4727)
1 parent 1d25047 commit 865a655

File tree

5 files changed

+103
-92
lines changed

5 files changed

+103
-92
lines changed

‎src/components/popover/README.md

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -47,99 +47,99 @@ Twelve options are available for positioning: `top`, `topleft`, `topright`, `rig
4747
Positioning is relative to the trigger element.
4848

4949
<div class="bd-example bd-example-popover-static">
50-
<div class="popover bs-popover-top bs-popover-top-docs">
51-
<div class="arrow" style="left: calc(50% - 6px)"></div>
50+
<div class="popover b-popover bs-popover-top bs-popover-top-docs">
51+
<div class="arrow" style="left: calc(50% - 8px)"></div>
5252
<h3 class="popover-header">Popover top</h3>
5353
<div class="popover-body">
5454
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
5555
quam venenatis vestibulum.
5656
</div>
5757
</div>
58-
<div class="popover bs-popover-top bs-popover-top-docs">
59-
<div class="arrow" style="right: 6px"></div>
58+
<div class="popover b-popover bs-popover-top bs-popover-top-docs">
59+
<div class="arrow" style="right: 0px"></div>
6060
<h3 class="popover-header">Popover topleft</h3>
6161
<div class="popover-body">
6262
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
6363
quam venenatis vestibulum.
6464
</div>
6565
</div>
66-
<div class="popover bs-popover-top bs-popover-top-docs">
67-
<div class="arrow" style="left: 6px"></div>
66+
<div class="popover b-popover bs-popover-top bs-popover-top-docs">
67+
<div class="arrow" style="left: 0px"></div>
6868
<h3 class="popover-header">Popover topright</h3>
6969
<div class="popover-body">
7070
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
7171
quam venenatis vestibulum.
7272
</div>
7373
</div>
7474

75-
<div class="popover bs-popover-right bs-popover-right-docs">
76-
<div class="arrow" style="top: calc(50% - 8px)"></div>
75+
<div class="popover b-popover bs-popover-right bs-popover-right-docs">
76+
<div class="arrow" style="top: calc(50% - 4px)"></div>
7777
<h3 class="popover-header">Popover right</h3>
7878
<div class="popover-body">
7979
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
8080
quam venenatis vestibulum.
8181
</div>
8282
</div>
83-
<div class="popover bs-popover-right bs-popover-right-docs">
84-
<div class="arrow" style="bottom: 4px"></div>
83+
<div class="popover b-popover bs-popover-right bs-popover-right-docs">
84+
<div class="arrow" style="bottom: 0px"></div>
8585
<h3 class="popover-header">Popover righttop</h3>
8686
<div class="popover-body">
8787
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
8888
quam venenatis vestibulum.
8989
</div>
9090
</div>
91-
<div class="popover bs-popover-right bs-popover-right-docs">
92-
<div class="arrow" style="top: 4px"></div>
91+
<div class="popover b-popover bs-popover-right bs-popover-right-docs">
92+
<div class="arrow" style="top: 0px"></div>
9393
<h3 class="popover-header">Popover rightbottom</h3>
9494
<div class="popover-body">
9595
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
9696
quam venenatis vestibulum.
9797
</div>
9898
</div>
9999

100-
<div class="popover bs-popover-bottom bs-popover-bottom-docs">
101-
<div class="arrow" style="left: calc(50% - 6px)"></div>
100+
<div class="popover b-popover bs-popover-bottom bs-popover-bottom-docs">
101+
<div class="arrow" style="left: calc(50% - 8px)"></div>
102102
<h3 class="popover-header">Popover bottom</h3>
103103
<div class="popover-body">
104104
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
105105
quam venenatis vestibulum.
106106
</div>
107107
</div>
108-
<div class="popover bs-popover-bottom bs-popover-bottom-docs">
109-
<div class="arrow" style="right: 6px"></div>
108+
<div class="popover b-popover bs-popover-bottom bs-popover-bottom-docs">
109+
<div class="arrow" style="right: 0px"></div>
110110
<h3 class="popover-header">Popover bottomleft</h3>
111111
<div class="popover-body">
112112
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
113113
quam venenatis vestibulum.
114114
</div>
115115
</div>
116-
<div class="popover bs-popover-bottom bs-popover-bottom-docs">
117-
<div class="arrow" style="left: 6px"></div>
116+
<div class="popover b-popover bs-popover-bottom bs-popover-bottom-docs">
117+
<div class="arrow" style="left: 0px"></div>
118118
<h3 class="popover-header">Popover bottomright</h3>
119119
<div class="popover-body">
120120
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
121121
quam venenatis vestibulum.
122122
</div>
123123
</div>
124124

125-
<div class="popover bs-popover-left bs-popover-left-docs">
126-
<div class="arrow" style="top: calc(50% - 8px)"></div>
125+
<div class="popover b-popover bs-popover-left bs-popover-left-docs">
126+
<div class="arrow" style="top: calc(50% - 4px)"></div>
127127
<h3 class="popover-header">Popover left</h3>
128128
<div class="popover-body">
129129
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
130130
quam venenatis vestibulum.
131131
</div>
132132
</div>
133-
<div class="popover bs-popover-left bs-popover-left-docs">
134-
<div class="arrow" style="bottom: 4px"></div>
133+
<div class="popover b-popover bs-popover-left bs-popover-left-docs">
134+
<div class="arrow" style="bottom: 0px"></div>
135135
<h3 class="popover-header">Popover lefttop</h3>
136136
<div class="popover-body">
137137
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
138138
quam venenatis vestibulum.
139139
</div>
140140
</div>
141-
<div class="popover bs-popover-left bs-popover-left-docs">
142-
<div class="arrow" style="top: 4px"></div>
141+
<div class="popover b-popover bs-popover-left bs-popover-left-docs">
142+
<div class="arrow" style="top: 0px"></div>
143143
<h3 class="popover-header">Popover leftbottom</h3>
144144
<div class="popover-body">
145145
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia

‎src/components/tooltip/README.md

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -46,52 +46,52 @@ Twelve options are available for positioning: `top`, `topleft`, `topright`, `rig
4646
The default position is `top`. Positioning is relative to the trigger element.
4747

4848
<div class="bd-example bd-example-tooltip-static">
49-
<div class="tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
49+
<div class="tooltip b-tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
5050
<div class="arrow" style="left: calc(50% - 6px)"></div>
5151
<div class="tooltip-inner">Tooltip on the top</div>
5252
</div>
53-
<div class="tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
54-
<div class="arrow" style="right: 6px"></div>
53+
<div class="tooltip b-tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
54+
<div class="arrow" style="right: 0px"></div>
5555
<div class="tooltip-inner">Tooltip on the topleft</div>
5656
</div>
57-
<div class="tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
58-
<div class="arrow" style="left: 6px"></div>
57+
<div class="tooltip b-tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
58+
<div class="arrow" style="left: 0px"></div>
5959
<div class="tooltip-inner">Tooltip on the topright</div>
6060
</div>
61-
<div class="tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
62-
<div class="arrow" style="top: calc(50% - 5px)"></div>
61+
<div class="tooltip b-tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
62+
<div class="arrow" style="top: 5px"></div>
6363
<div class="tooltip-inner">Tooltip on the right</div>
6464
</div>
65-
<div class="tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
66-
<div class="arrow" style="bottom: 4px"></div>
65+
<div class="tooltip b-tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
66+
<div class="arrow" style="bottom: 0px"></div>
6767
<div class="tooltip-inner">Tooltip on the righttop</div>
6868
</div>
69-
<div class="tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
70-
<div class="arrow" style="top: 4px"></div>
69+
<div class="tooltip b-tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
70+
<div class="arrow" style="top: 0px"></div>
7171
<div class="tooltip-inner">Tooltip on the rightbottom</div>
7272
</div>
73-
<div class="tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
73+
<div class="tooltip b-tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
7474
<div class="arrow" style="left: calc(50% - 6px)"></div>
7575
<div class="tooltip-inner">Tooltip on the bottom</div>
7676
</div>
77-
<div class="tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
78-
<div class="arrow" style="right: 6px"></div>
77+
<div class="tooltip b-tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
78+
<div class="arrow" style="right: 0px"></div>
7979
<div class="tooltip-inner">Tooltip on the bottomleft</div>
8080
</div>
81-
<div class="tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
82-
<div class="arrow" style="left: 6px"></div>
81+
<div class="tooltip b-tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
82+
<div class="arrow" style="left: 0px"></div>
8383
<div class="tooltip-inner">Tooltip on the bottomright</div>
8484
</div>
85-
<div class="tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
86-
<div class="arrow" style="top: calc(50% - 5px)"></div>
85+
<div class="tooltip b-tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
86+
<div class="arrow" style="top: 5px"></div>
8787
<div class="tooltip-inner">Tooltip on the left</div>
8888
</div>
89-
<div class="tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
90-
<div class="arrow" style="bottom: 4px"></div>
89+
<div class="tooltip b-tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
90+
<div class="arrow" style="bottom: 0px"></div>
9191
<div class="tooltip-inner">Tooltip on the lefttop</div>
9292
</div>
93-
<div class="tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
94-
<div class="arrow" style="top: 4px"></div>
93+
<div class="tooltip b-tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
94+
<div class="arrow" style="top: 0px"></div>
9595
<div class="tooltip-inner">Tooltip on the leftbottom</div>
9696
</div>
9797
</div>

‎src/components/tooltip/_tooltip.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,17 @@
1818
&.noninteractive {
1919
pointer-events: none;
2020
}
21+
22+
.arrow {
23+
margin: 0 $tooltip-border-radius;
24+
}
25+
26+
&.bs-tooltip-right,
27+
&.bs-tooltip-left {
28+
.arrow {
29+
margin: $tooltip-border-radius 0;
30+
}
31+
}
2132
}
2233

2334
// Create custom variants for tooltips

‎src/directives/popover/README.md

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -39,99 +39,99 @@ Twelve options are available for positioning: `top`, `topleft`, `topright`, `rig
3939
Positioning is relative to the trigger element.
4040

4141
<div class="bd-example bd-example-popover-static">
42-
<div class="popover bs-popover-top bs-popover-top-docs">
43-
<div class="arrow" style="left: calc(50% - 6px)"></div>
42+
<div class="popover b-popover bs-popover-top bs-popover-top-docs">
43+
<div class="arrow" style="left: calc(50% - 8px)"></div>
4444
<h3 class="popover-header">Popover top</h3>
4545
<div class="popover-body">
4646
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
4747
quam venenatis vestibulum.
4848
</div>
4949
</div>
50-
<div class="popover bs-popover-top bs-popover-top-docs">
51-
<div class="arrow" style="right: 6px"></div>
50+
<div class="popover b-popover bs-popover-top bs-popover-top-docs">
51+
<div class="arrow" style="right: 0px"></div>
5252
<h3 class="popover-header">Popover topleft</h3>
5353
<div class="popover-body">
5454
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
5555
quam venenatis vestibulum.
5656
</div>
5757
</div>
58-
<div class="popover bs-popover-top bs-popover-top-docs">
59-
<div class="arrow" style="left: 6px"></div>
58+
<div class="popover b-popover bs-popover-top bs-popover-top-docs">
59+
<div class="arrow" style="left: 0px"></div>
6060
<h3 class="popover-header">Popover topright</h3>
6161
<div class="popover-body">
6262
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
6363
quam venenatis vestibulum.
6464
</div>
6565
</div>
6666

67-
<div class="popover bs-popover-right bs-popover-right-docs">
68-
<div class="arrow" style="top: calc(50% - 8px)"></div>
67+
<div class="popover b-popover bs-popover-right bs-popover-right-docs">
68+
<div class="arrow" style="top: calc(50% - 4px)"></div>
6969
<h3 class="popover-header">Popover right</h3>
7070
<div class="popover-body">
7171
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
7272
quam venenatis vestibulum.
7373
</div>
7474
</div>
75-
<div class="popover bs-popover-right bs-popover-right-docs">
76-
<div class="arrow" style="bottom: 4px"></div>
75+
<div class="popover b-popover bs-popover-right bs-popover-right-docs">
76+
<div class="arrow" style="bottom: 0px"></div>
7777
<h3 class="popover-header">Popover righttop</h3>
7878
<div class="popover-body">
7979
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
8080
quam venenatis vestibulum.
8181
</div>
8282
</div>
83-
<div class="popover bs-popover-right bs-popover-right-docs">
84-
<div class="arrow" style="top: 4px"></div>
83+
<div class="popover b-popover bs-popover-right bs-popover-right-docs">
84+
<div class="arrow" style="top: 0px"></div>
8585
<h3 class="popover-header">Popover rightbottom</h3>
8686
<div class="popover-body">
8787
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
8888
quam venenatis vestibulum.
8989
</div>
9090
</div>
9191

92-
<div class="popover bs-popover-bottom bs-popover-bottom-docs">
93-
<div class="arrow" style="left: calc(50% - 6px)"></div>
92+
<div class="popover b-popover bs-popover-bottom bs-popover-bottom-docs">
93+
<div class="arrow" style="left: calc(50% - 8px)"></div>
9494
<h3 class="popover-header">Popover bottom</h3>
9595
<div class="popover-body">
9696
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
9797
quam venenatis vestibulum.
9898
</div>
9999
</div>
100-
<div class="popover bs-popover-bottom bs-popover-bottom-docs">
101-
<div class="arrow" style="right: 6px"></div>
100+
<div class="popover b-popover bs-popover-bottom bs-popover-bottom-docs">
101+
<div class="arrow" style="right: 0px"></div>
102102
<h3 class="popover-header">Popover bottomleft</h3>
103103
<div class="popover-body">
104104
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
105105
quam venenatis vestibulum.
106106
</div>
107107
</div>
108-
<div class="popover bs-popover-bottom bs-popover-bottom-docs">
109-
<div class="arrow" style="left: 6px"></div>
108+
<div class="popover b-popover bs-popover-bottom bs-popover-bottom-docs">
109+
<div class="arrow" style="left: 0px"></div>
110110
<h3 class="popover-header">Popover bottomright</h3>
111111
<div class="popover-body">
112112
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
113113
quam venenatis vestibulum.
114114
</div>
115115
</div>
116116

117-
<div class="popover bs-popover-left bs-popover-left-docs">
118-
<div class="arrow" style="top: calc(50% - 8px)"></div>
117+
<div class="popover b-popover bs-popover-left bs-popover-left-docs">
118+
<div class="arrow" style="top: calc(50% - 4px)"></div>
119119
<h3 class="popover-header">Popover left</h3>
120120
<div class="popover-body">
121121
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
122122
quam venenatis vestibulum.
123123
</div>
124124
</div>
125-
<div class="popover bs-popover-left bs-popover-left-docs">
126-
<div class="arrow" style="bottom: 4px"></div>
125+
<div class="popover b-popover bs-popover-left bs-popover-left-docs">
126+
<div class="arrow" style="bottom: 0px"></div>
127127
<h3 class="popover-header">Popover lefttop</h3>
128128
<div class="popover-body">
129129
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
130130
quam venenatis vestibulum.
131131
</div>
132132
</div>
133-
<div class="popover bs-popover-left bs-popover-left-docs">
134-
<div class="arrow" style="top: 4px"></div>
133+
<div class="popover b-popover bs-popover-left bs-popover-left-docs">
134+
<div class="arrow" style="top: 0px"></div>
135135
<h3 class="popover-header">Popover leftbottom</h3>
136136
<div class="popover-body">
137137
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia

0 commit comments

Comments
 (0)