12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 |
- //
- // Tooltips
- // --------------------------------------------------
- // Base class
- .tooltip {
- position: absolute;
- z-index: @zindexTooltip;
- display: block;
- visibility: visible;
- font-size: 11px;
- line-height: 1.4;
- .opacity(0);
- &.in { .opacity(80); }
- &.top { margin-top: -3px; padding: 5px 0; }
- &.right { margin-left: 3px; padding: 0 5px; }
- &.bottom { margin-top: 3px; padding: 5px 0; }
- &.left { margin-left: -3px; padding: 0 5px; }
- }
- // Wrapper for the tooltip content
- .tooltip-inner {
- max-width: 200px;
- padding: 8px;
- color: @tooltipColor;
- text-align: center;
- text-decoration: none;
- background-color: @tooltipBackground;
- .border-radius(@baseBorderRadius);
- }
- // 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: -@tooltipArrowWidth;
- border-width: @tooltipArrowWidth @tooltipArrowWidth 0;
- border-top-color: @tooltipArrowColor;
- }
- &.right .tooltip-arrow {
- top: 50%;
- left: 0;
- margin-top: -@tooltipArrowWidth;
- border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0;
- border-right-color: @tooltipArrowColor;
- }
- &.left .tooltip-arrow {
- top: 50%;
- right: 0;
- margin-top: -@tooltipArrowWidth;
- border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth;
- border-left-color: @tooltipArrowColor;
- }
- &.bottom .tooltip-arrow {
- top: 0;
- left: 50%;
- margin-left: -@tooltipArrowWidth;
- border-width: 0 @tooltipArrowWidth @tooltipArrowWidth;
- border-bottom-color: @tooltipArrowColor;
- }
- }
|