added scss file

Author: andreivictor

bootstrap4/bootstrap-tooltip-custom-class.scss

@@ -0,0 +1,100 @@
+//== Some Bootstrap variables for Tooltips
+//
+//##
+
+// the following lines can be deleted if the variables are already declared
+$white:                #fff;
+$red:                  #d9534f;
+$orange:               #f0ad4e;
+$green:                #5cb85c;
+$blue:                 #0275d8;
+$teal:                 #5bc0de;
+
+$brand-primary:         $blue;
+$brand-success:         $green;
+$brand-info:            $teal;
+$brand-warning:         $orange;
+$brand-danger:          $red;
+
+//
+$tooltip-color:         $white;
+
+//
+// Tooltip primary background color
+$tooltip-primary-bg:        $brand-primary !default;
+// Tooltip success background color
+$tooltip-success-bg:        $brand-success !default;
+// Tooltip info background color
+$tooltip-info-bg:           $brand-info !default;
+// Tooltip warning background color
+$tooltip-warning-bg:        $brand-warning !default;
+// Tooltip danger background color
+$tooltip-danger-bg:         $brand-danger !default;
+
+
+//== Tooltip Custom Mixin
+//
+//##
+@mixin tooltip-custom($bg-color, $color: $tooltip-color) {
+
+  .tooltip-inner {
+    background-color: $bg-color;
+    @if $color != $tooltip-color {
+       color: $color;
+    }
+  }
+
+  &.tooltip-top,
+  &.bs-tether-element-attached-bottom {
+    .tooltip-inner::before {
+      border-top-color: $bg-color;
+    }
+  }
+
+  &.tooltip-right,
+  &.bs-tether-element-attached-left {
+    .tooltip-inner::before {
+      border-right-color: $bg-color;
+    }
+  }
+
+  &.tooltip-bottom,
+  &.bs-tether-element-attached-top {
+    .tooltip-inner::before {
+      border-bottom-color: $bg-color;
+    }
+  }
+
+  &.tooltip-left,
+  &.bs-tether-element-attached-right {
+    .tooltip-inner::before {
+      border-left-color: $bg-color;
+    }
+  }
+
+}
+
+
+//== Styles for predefined Tooltip Custom Classes
+//
+//##
+.tooltip-primary {
+  @include tooltip-custom($tooltip-primary-bg);
+}
+
+.tooltip-success {
+  @include tooltip-custom($tooltip-success-bg);
+}
+
+.tooltip-info {
+  @include tooltip-custom($tooltip-info-bg);
+}
+
+.tooltip-warning {
+  @include tooltip-custom($tooltip-warning-bg);
+}
+
+.tooltip-danger {
+  @include tooltip-custom($tooltip-danger-bg);
+}
+