1 files changed, 78 insertions, 18 deletions
diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_tooltip.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_tooltip.scss
index 488dc63..dec674c 100644
--- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_tooltip.scss
+++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_tooltip.scss
@@ -1,35 +1,95 @@
-// TOOLTIP
-// ------=
+//
+// Tooltips
+// --------------------------------------------------
 
+
+// Base class
 .tooltip {
   position: absolute;
-  z-index: $zindexTooltip;
+  z-index: $zindex-tooltip;
   display: block;
   visibility: visible;
-  padding: 5px;
-  font-size: 11px;
+  font-size: $font-size-small;
+  line-height: 1.4;
   @include opacity(0);
-  &.in     { @include opacity(0.8); }
-  &.top    { margin-top:  -2px; }
-  &.right  { margin-left:  2px; }
-  &.bottom { margin-top:   2px; }
-  &.left   { margin-left: -2px; }
-  &.top .tooltip-arrow    { @include popoverArrowTop(); }
-  &.left .tooltip-arrow   { @include popoverArrowLeft(); }
-  &.bottom .tooltip-arrow { @include popoverArrowBottom(); }
-  &.right .tooltip-arrow  { @include popoverArrowRight(); }
+
+  &.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; }
 }
+
+// Wrapper for the tooltip content
 .tooltip-inner {
-  max-width: 200px;
+  max-width: $tooltip-max-width;
   padding: 3px 8px;
-  color: $white;
+  color: $tooltip-color;
   text-align: center;
   text-decoration: none;
-  background-color: $black;
-  @include border-radius(4px);
+  background-color: $tooltip-bg;
+  border-radius: $border-radius-base;
 }
+
+// Arrows
 .tooltip-arrow {
   position: absolute;
   width: 0;
   height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+.tooltip {
+  &.top .tooltip-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;
+  }
+  &.top-left .tooltip-arrow {
+    bottom: 0;
+    left: $tooltip-arrow-width;
+    border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
+    border-top-color: $tooltip-arrow-color;
+  }
+  &.top-right .tooltip-arrow {
+    bottom: 0;
+    right: $tooltip-arrow-width;
+    border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
+    border-top-color: $tooltip-arrow-color;
+  }
+  &.right .tooltip-arrow {
+    top: 50%;
+    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;
+  }
+  &.left .tooltip-arrow {
+    top: 50%;
+    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;
+  }
+  &.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;
+  }
+  &.bottom-left .tooltip-arrow {
+    top: 0;
+    left: $tooltip-arrow-width;
+    border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
+    border-bottom-color: $tooltip-arrow-color;
+  }
+  &.bottom-right .tooltip-arrow {
+    top: 0;
+    right: $tooltip-arrow-width;
+    border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
+    border-bottom-color: $tooltip-arrow-color;
+  }
 }