display: block;
width: $tooltip-arrow-width;
height: $tooltip-arrow-height;
- }
- .arrow::before {
- position: absolute;
- border-color: transparent;
- border-style: solid;
+ &::before {
+ position: absolute;
+ content: "";
+ border-color: transparent;
+ border-style: solid;
+ }
}
+}
- &.bs-tooltip-top {
- padding: $tooltip-arrow-height 0;
- .arrow {
- bottom: 0;
- }
+.bs-tooltip-top {
+ padding: $tooltip-arrow-height 0;
- .arrow::before {
+ .arrow {
+ bottom: 0;
+
+ &::before {
top: 0;
- content: "";
border-width: $tooltip-arrow-height $tooltip-arrow-width/2 0;
border-top-color: $tooltip-arrow-color;
}
}
- &.bs-tooltip-right {
- padding: 0 $tooltip-arrow-height;
- .arrow {
- left: 0;
- width: $tooltip-arrow-height;
- height: $tooltip-arrow-width;
- }
+}
+
+.bs-tooltip-right {
+ padding: 0 $tooltip-arrow-height;
+
+ .arrow {
+ left: 0;
+ width: $tooltip-arrow-height;
+ height: $tooltip-arrow-width;
- .arrow::before {
+ &::before {
right: 0;
- content: "";
border-width: $tooltip-arrow-width/2 $tooltip-arrow-height $tooltip-arrow-width/2 0;
border-right-color: $tooltip-arrow-color;
}
}
- &.bs-tooltip-bottom {
- padding: $tooltip-arrow-height 0;
- .arrow {
- top: 0;
- }
+}
- .arrow::before {
+.bs-tooltip-bottom {
+ padding: $tooltip-arrow-height 0;
+
+ .arrow {
+ top: 0;
+
+ &::before {
bottom: 0;
- content: "";
border-width: 0 $tooltip-arrow-width/2 $tooltip-arrow-height;
border-bottom-color: $tooltip-arrow-color;
}
}
- &.bs-tooltip-left {
- padding: 0 $tooltip-arrow-height;
- .arrow {
- right: 0;
- width: $tooltip-arrow-height;
- height: $tooltip-arrow-width;
- }
+}
+
+.bs-tooltip-left {
+ padding: 0 $tooltip-arrow-height;
+
+ .arrow {
+ right: 0;
+ width: $tooltip-arrow-height;
+ height: $tooltip-arrow-width;
- .arrow::before {
+ &::before {
left: 0;
- content: "";
border-width: $tooltip-arrow-width/2 0 $tooltip-arrow-width/2 $tooltip-arrow-height;
border-left-color: $tooltip-arrow-color;
}
}
- &.bs-tooltip-auto {
- &[x-placement^="top"] {
- @extend .bs-tooltip-top;
- }
- &[x-placement^="right"] {
- @extend .bs-tooltip-right;
- }
- &[x-placement^="bottom"] {
- @extend .bs-tooltip-bottom;
- }
- &[x-placement^="left"] {
- @extend .bs-tooltip-left;
- }
+}
+
+.bs-tooltip-auto {
+ &[x-placement^="top"] {
+ @extend .bs-tooltip-top;
+ }
+ &[x-placement^="right"] {
+ @extend .bs-tooltip-right;
+ }
+ &[x-placement^="bottom"] {
+ @extend .bs-tooltip-bottom;
+ }
+ &[x-placement^="left"] {
+ @extend .bs-tooltip-left;
}
}