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