// From Bootstrap v3.0.0 .tooltip { position: absolute; z-index: 1030; display: block; font-size: 12px; line-height: 1.4; opacity: 0; visibility: visible; } .tooltip.in { opacity: 0.9; } .tooltip.top { padding: 5px 0; } .tooltip.right { padding: 0 5px; } .tooltip.bottom { padding: 5px 0; } .tooltip.left { padding: 0 5px; } .tooltip-inner { max-width: 200px; padding: 3px 8px; color: #fff; text-align: center; text-decoration: none; background-color: #000; border-radius: 4px; } .tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } .tooltip.top .tooltip-arrow { bottom: 0; inset-inline-start: 50%; margin-inline-start: -5px; border-top-color: #000; border-width: 5px 5px 0; } .tooltip.top-left .tooltip-arrow { bottom: 0; inset-inline-start: 5px; border-top-color: #000; border-width: 5px 5px 0; } .tooltip.top-right .tooltip-arrow { inset-inline-end: 5px; bottom: 0; border-top-color: #000; border-width: 5px 5px 0; } .tooltip.right .tooltip-arrow { top: 50%; inset-inline-start: 0; margin-top: -5px; border-inline-end-color: #000; border-width: 5px 5px 5px 0; } .tooltip.left .tooltip-arrow { top: 50%; inset-inline-end: 0; margin-top: -5px; border-inline-start-color: #000; border-width: 5px 0 5px 5px; } .tooltip.bottom .tooltip-arrow { top: 0; inset-inline-start: 50%; margin-inline-start: -5px; border-bottom-color: #000; border-width: 0 5px 5px; } .tooltip.bottom-left .tooltip-arrow { top: 0; inset-inline-start: 5px; border-bottom-color: #000; border-width: 0 5px 5px; } .tooltip.bottom-right .tooltip-arrow { top: 0; inset-inline-end: 5px; border-bottom-color: #000; border-width: 0 5px 5px; }