/* * * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file * distributed with this work for additional information * regarding copyright ownership. The ASF licenses this file * to you under the Apache License, Version 2.0 (the * "License"); you may not use this file except in compliance * with the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, * software distributed under the License is distributed on an * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY * KIND, either express or implied. See the License for the * specific language governing permissions and limitations * under the License. * */ // // Tooltips // -------------------------------------------------- // Base class .tooltip { position: absolute; z-index: @zindex-tooltip; display: block; visibility: visible; font-size: @font-size-small; line-height: 1.4; .opacity(0); &.in { .opacity(.9); } &.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; text-decoration: none; background-color: @tooltip-bg; border-radius: @border-radius-base; } // 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: -@tooltip-arrow-width; border-width: @tooltip-arrow-width @tooltip-arrow-width 0; border-top-color: @tooltip-arrow-color; } &.top-left .tooltip-arrow { bottom: 0; left: @tooltip-arrow-width; border-width: @tooltip-arrow-width @tooltip-arrow-width 0; border-top-color: @tooltip-arrow-color; } &.top-right .tooltip-arrow { bottom: 0; right: @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; left: @tooltip-arrow-width; border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; border-bottom-color: @tooltip-arrow-color; } &.bottom-right .tooltip-arrow { top: 0; right: @tooltip-arrow-width; border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; border-bottom-color: @tooltip-arrow-color; } }