// ============================================================================= // SCSS/SITE/STACKS/INTEGRITY/_TOOLTIPS.SCSS // ----------------------------------------------------------------------------- // Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; // tooltips are an updated version, which don't rely on images, use CSS3 for // animations, and data-attributes for local title storage. More information // on tooltips can be found here: // https://twitter.github.com/bootstrap/javascript.html#tooltips // ============================================================================= // ============================================================================= // TABLE OF CONTENTS // ----------------------------------------------------------------------------- // 01. Base Styles // 02. Arrows // ============================================================================= // Base Styles // ============================================================================= .tooltip { position: absolute; z-index: $zindexTooltip; display: block; visibility: visible; padding: 0.455em; @include font-size(1.1); font-weight: normal; line-height: 1.2; text-shadow: none; @include opacity(0); @include translate3d(0, 0, 0); @include transition(#{margin 0.3s ease, opacity 0.3s ease}); &.top { margin-top: 0; } &.right { margin-left: 0; } &.bottom { margin-top: 0; } &.left { margin-left: 0; } &.in.top { margin-top: -0.273em; } &.in.right { margin-left: 0.273em; } &.in.bottom { margin-top: 0.273em; } &.in.left { margin-left: -0.273em; } } .tooltip-inner { max-width: 200px; padding: 0.727em 0.818em; color: $tooltipColor; text-align: center; text-decoration: none; background-color: $tooltipBackground; border-radius: 4px; } // Arrows // ============================================================================= .tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } .tooltip { &.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -$tooltipArrowWidth; border-width: $tooltipArrowWidth $tooltipArrowWidth 0; border-top-color: $tooltipArrowColor; } &.right .tooltip-arrow { top: 50%; left: 0; margin-top: -$tooltipArrowWidth; border-width: $tooltipArrowWidth $tooltipArrowWidth $tooltipArrowWidth 0; border-right-color: $tooltipArrowColor; } &.left .tooltip-arrow { top: 50%; right: 0; margin-top: -$tooltipArrowWidth; border-width: $tooltipArrowWidth 0 $tooltipArrowWidth $tooltipArrowWidth; border-left-color: $tooltipArrowColor; } &.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -$tooltipArrowWidth; border-width: 0 $tooltipArrowWidth $tooltipArrowWidth; border-bottom-color: $tooltipArrowColor; } }