github.com/kayoticsully/syncthing@v0.8.9-0.20140724133906-c45a2fdc03f8/assets/bootstrap-3.1.1/less/tooltip.less (about) 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(@tooltip-opacity); } 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 }