/*! * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright (c) 2011-2016 Twitter, Inc. * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */ // // Tooltips // -------------------------------------------------- // Base class .tooltip { position: absolute; z-index: @zindex-tooltip; display: block; // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. // So reset our font and text properties to avoid inheriting weird values. .reset-text(); font-size: @font-size-small; .opacity(0); &.in { .opacity(@tooltip-opacity); } &.top { margin-top: -3px; padding: @tooltip-arrow-width 0; } &.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; } &.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; } &.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; } } // Wrapper for the tooltip content .tooltip-inner { max-width: @tooltip-max-width; padding: 3px 8px; color: @tooltip-color; text-align: center; background-color: @tooltip-bg; border-radius: @border-radius-base; } // Arrows .tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } // Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1 .tooltip { &.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -@tooltip-arrow-width; border-width: @tooltip-arrow-width @tooltip-arrow-width 0; border-top-color: @tooltip-arrow-color; } &.top-left .tooltip-arrow { bottom: 0; right: @tooltip-arrow-width; margin-bottom: -@tooltip-arrow-width; border-width: @tooltip-arrow-width @tooltip-arrow-width 0; border-top-color: @tooltip-arrow-color; } &.top-right .tooltip-arrow { bottom: 0; left: @tooltip-arrow-width; margin-bottom: -@tooltip-arrow-width; border-width: @tooltip-arrow-width @tooltip-arrow-width 0; border-top-color: @tooltip-arrow-color; } &.right .tooltip-arrow { top: 50%; left: 0; margin-top: -@tooltip-arrow-width; border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0; border-right-color: @tooltip-arrow-color; } &.left .tooltip-arrow { top: 50%; right: 0; margin-top: -@tooltip-arrow-width; border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width; border-left-color: @tooltip-arrow-color; } &.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -@tooltip-arrow-width; border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; border-bottom-color: @tooltip-arrow-color; } &.bottom-left .tooltip-arrow { top: 0; right: @tooltip-arrow-width; margin-top: -@tooltip-arrow-width; border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; border-bottom-color: @tooltip-arrow-color; } &.bottom-right .tooltip-arrow { top: 0; left: @tooltip-arrow-width; margin-top: -@tooltip-arrow-width; border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; border-bottom-color: @tooltip-arrow-color; } }