codekingpro/portable-devtools

1// Base class2.tooltip {3  position: absolute;4  z-index: $zindex-tooltip;5  display: block;6  margin: $tooltip-margin;7  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.8  // So reset our font and text properties to avoid inheriting weird values.9  @include reset-text();10  @include font-size($tooltip-font-size);11  // Allow breaking very long words so they don't overflow the tooltip's bounds12  word-wrap: break-word;13  opacity: 0;14 15  &.show { opacity: $tooltip-opacity; }16 17  .arrow {18    position: absolute;19    display: block;20    width: $tooltip-arrow-width;21    height: $tooltip-arrow-height;22 23    &::before {24      position: absolute;25      content: "";26      border-color: transparent;27      border-style: solid;28    }29  }30}31 32.bs-tooltip-top {33  padding: $tooltip-arrow-height 0;34 35  .arrow {36    bottom: 0;37 38    &::before {39      top: 0;40      border-width: $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;41      border-top-color: $tooltip-arrow-color;42    }43  }44}45 46.bs-tooltip-right {47  padding: 0 $tooltip-arrow-height;48 49  .arrow {50    left: 0;51    width: $tooltip-arrow-height;52    height: $tooltip-arrow-width;53 54    &::before {55      right: 0;56      border-width: ($tooltip-arrow-width * .5) $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;57      border-right-color: $tooltip-arrow-color;58    }59  }60}61 62.bs-tooltip-bottom {63  padding: $tooltip-arrow-height 0;64 65  .arrow {66    top: 0;67 68    &::before {69      bottom: 0;70      border-width: 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;71      border-bottom-color: $tooltip-arrow-color;72    }73  }74}75 76.bs-tooltip-left {77  padding: 0 $tooltip-arrow-height;78 79  .arrow {80    right: 0;81    width: $tooltip-arrow-height;82    height: $tooltip-arrow-width;83 84    &::before {85      left: 0;86      border-width: ($tooltip-arrow-width * .5) 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;87      border-left-color: $tooltip-arrow-color;88    }89  }90}91 92.bs-tooltip-auto {93  &[x-placement^="top"] {94    @extend .bs-tooltip-top;95  }96  &[x-placement^="right"] {97    @extend .bs-tooltip-right;98  }99  &[x-placement^="bottom"] {100    @extend .bs-tooltip-bottom;101  }102  &[x-placement^="left"] {103    @extend .bs-tooltip-left;104  }105}106 107// Wrapper for the tooltip content108.tooltip-inner {109  max-width: $tooltip-max-width;110  padding: $tooltip-padding-y $tooltip-padding-x;111  color: $tooltip-color;112  text-align: center;113  background-color: $tooltip-bg;114  @include border-radius($tooltip-border-radius);115}116