video/public/less/tooltip.less

   1 //
   2 // Tooltips
   3 // --------------------------------------------------
   4
   5
   6 // Base class
   7 .tooltip {
   8   position: absolute;
   9   z-index: @zindexTooltip;
  10   display: block;
  11   visibility: visible;
  12   padding: 5px;
  13   font-size: 11px;
  14   .opacity(0);
  15   &.in     { .opacity(80); }
  16   &.top    { margin-top:  -3px; }
  17   &.right  { margin-left:  3px; }
  18   &.bottom { margin-top:   3px; }
  19   &.left   { margin-left: -3px; }
  20 }
  21
  22 // Wrapper for the tooltip content
  23 .tooltip-inner {
  24   max-width: 200px;
  25   padding: 3px 8px;
  26   color: @tooltipColor;
  27   text-align: center;
  28   text-decoration: none;
  29   background-color: @tooltipBackground;
  30   .border-radius(4px);
  31 }
  32
  33 // Arrows
  34 .tooltip-arrow {
  35   position: absolute;
  36   width: 0;
  37   height: 0;
  38   border-color: transparent;
  39   border-style: solid;
  40 }
  41 .tooltip {
  42   &.top .tooltip-arrow {
  43     bottom: 0;
  44     left: 50%;
  45     margin-left: -@tooltipArrowWidth;
  46     border-width: @tooltipArrowWidth @tooltipArrowWidth 0;
  47     border-top-color: @tooltipArrowColor;
  48   }
  49   &.right .tooltip-arrow {
  50     top: 50%;
  51     left: 0;
  52     margin-top: -@tooltipArrowWidth;
  53     border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0;
  54     border-right-color: @tooltipArrowColor;
  55   }
  56   &.left .tooltip-arrow {
  57     top: 50%;
  58     right: 0;
  59     margin-top: -@tooltipArrowWidth;
  60     border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth;
  61     border-left-color: @tooltipArrowColor;
  62   }
  63   &.bottom .tooltip-arrow {
  64     top: 0;
  65     left: 50%;
  66     margin-left: -@tooltipArrowWidth;
  67     border-width: 0 @tooltipArrowWidth @tooltipArrowWidth;
  68     border-bottom-color: @tooltipArrowColor;
  69   }
  70 }