rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Use Popper.js to manage arrow position

Browse Source
This commit is contained in:
Johann-S 2017-05-23 14:17:07 +02:00
parent 3706c88348
commit aa36439e17
5 changed files with 58 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/src/popover.js
View File

@ -30,7 +30,7 @@ const Popover = (($) => {
trigger : 'click',
content : '',
template : '<div class="popover" role="tooltip">'
+ '<div class="arrow"></div>'
+ '<div class="arrow" x-arrow></div>'
+ '<h3 class="popover-title"></h3>'
+ '<div class="popover-content"></div></div>'
})

2
js/src/tooltip.js
View File

@ -60,7 +60,7 @@ const Tooltip = (($) => {
const Default = {
animation : true,
template : '<div class="tooltip" role="tooltip">'
+ '<div class="arrow"></div>'
+ '<div class="arrow" x-arrow></div>'
+ '<div class="tooltip-inner"></div></div>',
trigger : 'hover focus',
title : '',

46
scss/_popover.scss
View File

@ -20,14 +20,19 @@
// Arrows
//
// .popover-arrow is outer, .popover-arrow::after is inner
// .arrow is outer, .arrow::after is inner
.arrow {
position: absolute;
display: block;
width: $popover-arrow-width;
height: $popover-arrow-height;
}
.arrow::before,
.arrow::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
@ -38,7 +43,7 @@
}
.arrow::after {
content: "";
border-width: $popover-arrow-width;
border-width: $popover-arrow-outer-width;
}
// Popover directions
@ -46,21 +51,24 @@
&.bs-popover-top {
margin-bottom: $popover-arrow-width;
.arrow {
bottom: 0;
}
.arrow::before,
.arrow::after {
left: 50%;
border-bottom-width: 0;
}
.arrow::before {
bottom: -$popover-arrow-outer-width;
margin-left: -$popover-arrow-outer-width;
margin-left: -($popover-arrow-outer-width - 5);
border-top-color: $popover-arrow-outer-color;
}
.arrow::after {
bottom: -($popover-arrow-outer-width - 1);
margin-left: -$popover-arrow-width;
margin-left: -($popover-arrow-outer-width - 5);
border-top-color: $popover-arrow-color;
}
}
@ -68,21 +76,23 @@
&.bs-popover-right {
margin-left: $popover-arrow-width;
.arrow {
left: 0;
}
.arrow::before,
.arrow::after {
top: 50%;
margin-top: -($popover-arrow-outer-width - 3);
border-left-width: 0;
}
.arrow::before {
left: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width;
border-right-color: $popover-arrow-outer-color;
}
.arrow::after {
left: -($popover-arrow-outer-width - 1);
margin-top: -($popover-arrow-outer-width - 1);
border-right-color: $popover-arrow-color;
}
}
@ -90,21 +100,23 @@
&.bs-popover-bottom {
margin-top: $popover-arrow-width;
.arrow {
top: 0;
}
.arrow::before,
.arrow::after {
left: 50%;
margin-left: -($popover-arrow-width - 3);
border-top-width: 0;
}
.arrow::before {
top: -$popover-arrow-outer-width;
margin-left: -$popover-arrow-outer-width;
border-bottom-color: $popover-arrow-outer-color;
}
.arrow::after {
top: -($popover-arrow-outer-width - 1);
margin-left: -$popover-arrow-width;
border-bottom-color: $popover-arrow-color;
}
@ -124,21 +136,23 @@
&.bs-popover-left {
margin-right: $popover-arrow-width;
.arrow {
right: 0;
}
.arrow::before,
.arrow::after {
top: 50%;
margin-top: -($popover-arrow-outer-width - 3);
border-right-width: 0;
}
.arrow::before {
right: -$popover-arrow-outer-width;
margin-top: -$popover-arrow-outer-width;
border-left-color: $popover-arrow-outer-color;
}
.arrow::after {
right: -($popover-arrow-outer-width - 1);
margin-top: -($popover-arrow-outer-width - 1);
border-left-color: $popover-arrow-color;
}
}

36
scss/_tooltip.scss
View File

@ -14,13 +14,21 @@
&.show { opacity: $tooltip-opacity; }
.arrow {
position: absolute;
display: block;
width: $tooltip-arrow-width;
height: $tooltip-arrow-height;
}
&.bs-tooltip-top {
padding: $tooltip-arrow-width 0;
.arrow {
bottom: 0;
}
.arrow::before {
bottom: 0;
left: 50%;
margin-left: -$tooltip-arrow-width;
margin-left: -($tooltip-arrow-width - 2);
content: "";
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
border-top-color: $tooltip-arrow-color;
@ -28,11 +36,12 @@
}
&.bs-tooltip-right {
padding: 0 $tooltip-arrow-width;
.arrow {
left: 0;
}
.arrow::before {
top: 50%;
left: 0;
margin-top: -$tooltip-arrow-width;
margin-top: -($tooltip-arrow-width - 2);
content: "";
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
border-right-color: $tooltip-arrow-color;
@ -40,11 +49,12 @@
}
&.bs-tooltip-bottom {
padding: $tooltip-arrow-width 0;
.arrow {
top: 0;
}
.arrow::before {
top: 0;
left: 50%;
margin-left: -$tooltip-arrow-width;
margin-left: -($tooltip-arrow-width - 2);
content: "";
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
border-bottom-color: $tooltip-arrow-color;
@ -52,11 +62,13 @@
}
&.bs-tooltip-left {
padding: 0 $tooltip-arrow-width;
.arrow {
right: 0;
}
.arrow::before {
top: 50%;
right: 0;
margin-top: -$tooltip-arrow-width;
margin-top: -($tooltip-arrow-width - 2);
content: "";
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
border-left-color: $tooltip-arrow-color;
@ -65,8 +77,6 @@
.arrow::before {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}

3
scss/_variables.scss
View File

@ -698,7 +698,9 @@ $tooltip-padding-y: 3px !default;
$tooltip-padding-x: 8px !default;
$tooltip-margin: 0 !default;
$tooltip-arrow-width: 5px !default;
$tooltip-arrow-height: 5px !default;
$tooltip-arrow-color: $tooltip-bg !default;
@ -721,6 +723,7 @@ $popover-content-padding-y: 9px !default;
$popover-content-padding-x: 14px !default;
$popover-arrow-width: 10px !default;
$popover-arrow-height: 5px !default;
$popover-arrow-color: $popover-bg !default;
$popover-arrow-outer-width: ($popover-arrow-width + 1px) !default;