tooltip.less 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. //
  2. // Tooltips
  3. // --------------------------------------------------
  4. // Base class
  5. .tooltip {
  6. font-size: ceil((@component-font-size-base * 0.933)); // ~14px
  7. line-height: 1.286; // 18px
  8. z-index: @zindex-tooltip;
  9. &.in { .opacity(@tooltip-opacity); }
  10. &.top { margin-top: -5px; padding: @tooltip-arrow-width 0; }
  11. &.right { margin-left: 5px; padding: 0 @tooltip-arrow-width; }
  12. &.bottom { margin-top: 5px; padding: @tooltip-arrow-width 0; }
  13. &.left { margin-left: -5px; padding: 0 @tooltip-arrow-width; }
  14. }
  15. // Wrapper for the tooltip content
  16. .tooltip-inner {
  17. max-width: @tooltip-max-width;
  18. line-height: 1.286; // 18px
  19. padding: 12px 12px;
  20. color: @tooltip-color;
  21. background-color: @tooltip-bg;
  22. border-radius: @border-radius-large;
  23. }
  24. // Arrows
  25. .tooltip {
  26. &.top .tooltip-arrow {
  27. margin-left: -@tooltip-arrow-width;
  28. border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
  29. border-top-color: @tooltip-arrow-color;
  30. }
  31. &.right .tooltip-arrow {
  32. margin-top: -@tooltip-arrow-width;
  33. border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
  34. border-right-color: @tooltip-arrow-color;
  35. }
  36. &.left .tooltip-arrow {
  37. margin-top: -@tooltip-arrow-width;
  38. border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
  39. border-left-color: @tooltip-arrow-color;
  40. }
  41. &.bottom .tooltip-arrow {
  42. margin-left: -@tooltip-arrow-width;
  43. border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
  44. border-bottom-color: @tooltip-arrow-color;
  45. }
  46. }