1// Base class 2.tooltip { 3 position: absolute; 4 z-index: $zindex-tooltip; 5 display: block; 6 margin: $tooltip-margin; 7 // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. 8 // So reset our font and text properties to avoid inheriting weird values. 9 @include reset-text(); 10 @include font-size($tooltip-font-size); 11 // Allow breaking very long words so they don't overflow the tooltip's bounds 12 word-wrap: break-word; 13 opacity: 0; 14 15 &.show { opacity: $tooltip-opacity; } 16 17 .arrow { 18 position: absolute; 19 display: block; 20 width: $tooltip-arrow-width; 21 height: $tooltip-arrow-height; 22 23 &::before { 24 position: absolute; 25 content: ""; 26 border-color: transparent; 27 border-style: solid; 28 } 29 } 30} 31 32.bs-tooltip-top { 33 padding: $tooltip-arrow-height 0; 34 35 .arrow { 36 bottom: 0; 37 38 &::before { 39 top: 0; 40 border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0; 41 border-top-color: $tooltip-arrow-color; 42 } 43 } 44} 45 46.bs-tooltip-right { 47 padding: 0 $tooltip-arrow-height; 48 49 .arrow { 50 left: 0; 51 width: $tooltip-arrow-height; 52 height: $tooltip-arrow-width; 53 54 &::before { 55 right: 0; 56 border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0; 57 border-right-color: $tooltip-arrow-color; 58 } 59 } 60} 61 62.bs-tooltip-bottom { 63 padding: $tooltip-arrow-height 0; 64 65 .arrow { 66 top: 0; 67 68 &::before { 69 bottom: 0; 70 border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height; 71 border-bottom-color: $tooltip-arrow-color; 72 } 73 } 74} 75 76.bs-tooltip-left { 77 padding: 0 $tooltip-arrow-height; 78 79 .arrow { 80 right: 0; 81 width: $tooltip-arrow-height; 82 height: $tooltip-arrow-width; 83 84 &::before { 85 left: 0; 86 border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height; 87 border-left-color: $tooltip-arrow-color; 88 } 89 } 90} 91 92.bs-tooltip-auto { 93 &[x-placement^="top"] { 94 @extend .bs-tooltip-top; 95 } 96 &[x-placement^="right"] { 97 @extend .bs-tooltip-right; 98 } 99 &[x-placement^="bottom"] { 100 @extend .bs-tooltip-bottom; 101 } 102 &[x-placement^="left"] { 103 @extend .bs-tooltip-left; 104 } 105} 106 107// Wrapper for the tooltip content 108.tooltip-inner { 109 max-width: $tooltip-max-width; 110 padding: $tooltip-padding-y $tooltip-padding-x; 111 color: $tooltip-color; 112 text-align: center; 113 background-color: $tooltip-bg; 114 @include border-radius($tooltip-border-radius); 115} 116