mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-25 14:30:46 +02:00
Code Issues Releases Wiki 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
Download Patch File Download Diff File Expand all files Collapse all files

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;
}