_sass/bootstrap/_tooltip.scss in apx-docs-theme-0.1.7 vs _sass/bootstrap/_tooltip.scss in apx-docs-theme-0.1.15
- old
+ new
@@ -1,101 +1,115 @@
-//
-// Tooltips
-// --------------------------------------------------
-
-
// Base class
.tooltip {
position: absolute;
z-index: $zindex-tooltip;
display: block;
+ margin: $tooltip-margin;
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
- @include reset-text;
- font-size: $font-size-small;
+ @include reset-text();
+ font-size: $tooltip-font-size;
+ // Allow breaking very long words so they don't overflow the tooltip's bounds
+ word-wrap: break-word;
+ opacity: 0;
- @include opacity(0);
+ &.show { opacity: $tooltip-opacity; }
- &.in { @include opacity($tooltip-opacity); }
- &.top { margin-top: -3px; padding: $tooltip-arrow-width 0; }
- &.right { margin-left: 3px; padding: 0 $tooltip-arrow-width; }
- &.bottom { margin-top: 3px; padding: $tooltip-arrow-width 0; }
- &.left { margin-left: -3px; padding: 0 $tooltip-arrow-width; }
-}
+ .arrow {
+ position: absolute;
+ display: block;
+ width: $tooltip-arrow-width;
+ height: $tooltip-arrow-height;
-// Wrapper for the tooltip content
-.tooltip-inner {
- max-width: $tooltip-max-width;
- padding: 3px 8px;
- color: $tooltip-color;
- text-align: center;
- background-color: $tooltip-bg;
- border-radius: $border-radius-base;
+ &::before {
+ position: absolute;
+ content: "";
+ border-color: transparent;
+ border-style: solid;
+ }
+ }
}
-// Arrows
-.tooltip-arrow {
- position: absolute;
- width: 0;
- height: 0;
- border-color: transparent;
- border-style: solid;
-}
-// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
-.tooltip {
- &.top .tooltip-arrow {
+.bs-tooltip-top {
+ padding: $tooltip-arrow-height 0;
+
+ .arrow {
bottom: 0;
- left: 50%;
- margin-left: -$tooltip-arrow-width;
- border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
- border-top-color: $tooltip-arrow-color;
+
+ &::before {
+ top: 0;
+ border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
+ border-top-color: $tooltip-arrow-color;
+ }
}
- &.top-left .tooltip-arrow {
- bottom: 0;
- right: $tooltip-arrow-width;
- margin-bottom: -$tooltip-arrow-width;
- border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
- border-top-color: $tooltip-arrow-color;
- }
- &.top-right .tooltip-arrow {
- bottom: 0;
- left: $tooltip-arrow-width;
- margin-bottom: -$tooltip-arrow-width;
- border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
- border-top-color: $tooltip-arrow-color;
- }
- &.right .tooltip-arrow {
- top: 50%;
+}
+
+.bs-tooltip-right {
+ padding: 0 $tooltip-arrow-height;
+
+ .arrow {
left: 0;
- margin-top: -$tooltip-arrow-width;
- border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
- border-right-color: $tooltip-arrow-color;
+ width: $tooltip-arrow-height;
+ height: $tooltip-arrow-width;
+
+ &::before {
+ right: 0;
+ border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
+ border-right-color: $tooltip-arrow-color;
+ }
}
- &.left .tooltip-arrow {
- top: 50%;
+}
+
+.bs-tooltip-bottom {
+ padding: $tooltip-arrow-height 0;
+
+ .arrow {
+ top: 0;
+
+ &::before {
+ bottom: 0;
+ 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;
- margin-top: -$tooltip-arrow-width;
- border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
- border-left-color: $tooltip-arrow-color;
+ width: $tooltip-arrow-height;
+ height: $tooltip-arrow-width;
+
+ &::before {
+ left: 0;
+ border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
+ border-left-color: $tooltip-arrow-color;
+ }
}
- &.bottom .tooltip-arrow {
- top: 0;
- left: 50%;
- margin-left: -$tooltip-arrow-width;
- border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
- border-bottom-color: $tooltip-arrow-color;
+}
+
+.bs-tooltip-auto {
+ &[x-placement^="top"] {
+ @extend .bs-tooltip-top;
}
- &.bottom-left .tooltip-arrow {
- top: 0;
- right: $tooltip-arrow-width;
- margin-top: -$tooltip-arrow-width;
- border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
- border-bottom-color: $tooltip-arrow-color;
+ &[x-placement^="right"] {
+ @extend .bs-tooltip-right;
}
- &.bottom-right .tooltip-arrow {
- top: 0;
- left: $tooltip-arrow-width;
- margin-top: -$tooltip-arrow-width;
- border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
- border-bottom-color: $tooltip-arrow-color;
+ &[x-placement^="bottom"] {
+ @extend .bs-tooltip-bottom;
}
+ &[x-placement^="left"] {
+ @extend .bs-tooltip-left;
+ }
+}
+
+// Wrapper for the tooltip content
+.tooltip-inner {
+ max-width: $tooltip-max-width;
+ padding: $tooltip-padding-y $tooltip-padding-x;
+ color: $tooltip-color;
+ text-align: center;
+ background-color: $tooltip-bg;
+ @include border-radius($tooltip-border-radius);
}