| /* Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
| The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
| Code distributed by Google as part of the polymer project is also |
| subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt */ |
| |
| :host { |
| box-sizing: border-box; |
| position: relative; |
| display: inline-block; |
| outline: none; |
| } |
| |
| :host(:hover:not([disabled])) .core-tooltip { |
| visibility: visible !important; |
| } |
| |
| :host([focused]) .core-tooltip { |
| visibility: visible !important; |
| } |
| |
| .core-tooltip:not(.show) { |
| visibility: hidden; |
| } |
| |
| .core-tooltip { |
| position: absolute; |
| font-size: 10px; |
| font-weight: 500; |
| padding: 8px; |
| color: white; |
| background-color: rgba(0, 0, 0, 0.9); |
| box-sizing: border-box; |
| border-radius: 3px; /* TODO: not in spec. */ |
| white-space: nowrap; |
| line-height: 6px; |
| z-index: 1002; /* TODO: this is brittle. */ |
| -webkit-user-select: none; |
| user-select: none; |
| } |
| |
| :host([large]) .core-tooltip { |
| line-height: 14px; |
| font-size: 14px; |
| padding: 16px; |
| } |
| |
| .core-tooltip.noarrow::after { |
| display: none; |
| } |
| |
| .core-tooltip::after { |
| position: absolute; |
| border: solid transparent; |
| content: ''; |
| height: 0; |
| width: 0; |
| border-width: 4px; |
| } |
| |
| .top { |
| margin-bottom: 10px; /* TODO: not specified in spec */ |
| bottom: 100%; |
| } |
| |
| .right { |
| margin-left: 10px; /* TODO: not specified in spec */ |
| left: 100%; |
| } |
| |
| .bottom { |
| top: 100%; |
| margin-top: 10px; /* TODO: not specified in spec */ |
| } |
| |
| .left { |
| margin-right: 10px; /* TODO: not specified in spec */ |
| right: 100%; |
| } |
| |
| .core-tooltip.bottom::after { |
| bottom: 100%; |
| left: calc(50% - 4px); |
| border-bottom-color: rgba(0,0,0,0.8); |
| } |
| |
| .core-tooltip.left::after { |
| left: 100%; |
| top: calc(50% - 4px); |
| border-left-color: rgba(0,0,0,0.8); |
| } |
| |
| .core-tooltip.top::after { |
| top: 100%; |
| left: calc(50% - 4px); |
| border-top-color: rgba(0,0,0,0.8); |
| } |
| |
| .core-tooltip.right::after { |
| right: 100%; |
| top: calc(50% - 4px); |
| border-right-color: rgba(0,0,0,0.8); |
| } |