less/tooltip.less

   1 //
   2 // Tooltips
   3 // --------------------------------------------------
   4
   5
   6 // Base class
   7 .tooltip {
   8   position: absolute;
   9   z-index: @zindex-tooltip;
  10   display: block;
  11   visibility: visible;
  12   font-size: @font-size-small;
  13   line-height: 1.4;
  14   .opacity(0);
  15
  16   &.in     { .opacity(.9); }
  17   &.top    { margin-top:  -3px; padding: @tooltip-arrow-width 0; }
  18   &.right  { margin-left:  3px; padding: 0 @tooltip-arrow-width; }
  19   &.bottom { margin-top:   3px; padding: @tooltip-arrow-width 0; }
  20   &.left   { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
  21 }
  22
  23 // Wrapper for the tooltip content
  24 .tooltip-inner {
  25   max-width: @tooltip-max-width;
  26   padding: 3px 8px;
  27   color: @tooltip-color;
  28   text-align: center;
  29   text-decoration: none;
  30   background-color: @tooltip-bg;
  31   border-radius: @border-radius-base;
  32 }
  33
  34 // Arrows
  35 .tooltip-arrow {
  36   position: absolute;
  37   width: 0;
  38   height: 0;
  39   border-color: transparent;
  40   border-style: solid;
  41 }
  42 .tooltip {
  43   &.top .tooltip-arrow {
  44     bottom: 0;
  45     left: 50%;
  46     margin-left: -@tooltip-arrow-width;
  47     border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
  48     border-top-color: @tooltip-arrow-color;
  49   }
  50   &.top-left .tooltip-arrow {
  51     bottom: 0;
  52     left: @tooltip-arrow-width;
  53     border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
  54     border-top-color: @tooltip-arrow-color;
  55   }
  56   &.top-right .tooltip-arrow {
  57     bottom: 0;
  58     right: @tooltip-arrow-width;
  59     border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
  60     border-top-color: @tooltip-arrow-color;
  61   }
  62   &.right .tooltip-arrow {
  63     top: 50%;
  64     left: 0;
  65     margin-top: -@tooltip-arrow-width;
  66     border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
  67     border-right-color: @tooltip-arrow-color;
  68   }
  69   &.left .tooltip-arrow {
  70     top: 50%;
  71     right: 0;
  72     margin-top: -@tooltip-arrow-width;
  73     border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
  74     border-left-color: @tooltip-arrow-color;
  75   }
  76   &.bottom .tooltip-arrow {
  77     top: 0;
  78     left: 50%;
  79     margin-left: -@tooltip-arrow-width;
  80     border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
  81     border-bottom-color: @tooltip-arrow-color;
  82   }
  83   &.bottom-left .tooltip-arrow {
  84     top: 0;
  85     left: @tooltip-arrow-width;
  86     border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
  87     border-bottom-color: @tooltip-arrow-color;
  88   }
  89   &.bottom-right .tooltip-arrow {
  90     top: 0;
  91     right: @tooltip-arrow-width;
  92     border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
  93     border-bottom-color: @tooltip-arrow-color;
  94   }
  95 }