1 /* Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 2 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 3 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 4 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 5 Code distributed by Google as part of the polymer project is also 6 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt */ 7 8 :host { 9 box-sizing: border-box; 10 position: relative; 11 display: inline-block; 12 } 13 14 :host(:hover) .polymer-tooltip { 15 visibility: visible !important; 16 } 17 18 :host(:focus) .polymer-tooltip { 19 visibility: visible !important; 20 } 21 22 .polymer-tooltip:not(.show) { 23 visibility: hidden; 24 } 25 26 .polymer-tooltip { 27 pointer-events: none; 28 position: absolute; 29 display: flex; 30 font-size: 10px; 31 font-family: sans-serif; 32 padding: 8px; 33 color: white; 34 background-color: rgba(0,0,0,0.8); 35 box-sizing: border-box; 36 border-radius: 3px; /* TODO: not in spec. */ 37 white-space: nowrap; 38 line-height: 6px; 39 z-index: 1002; /* TODO: this is brittle. */ 40 } 41 42 :host([large]) .polymer-tooltip { 43 line-height: 14px; 44 font-size: 14px; 45 padding: 16px; 46 } 47 48 .polymer-tooltip.noarrow::after { 49 display: none; 50 } 51 52 .polymer-tooltip::after { 53 position: absolute; 54 border: solid transparent; 55 content: ''; 56 height: 0; 57 width: 0; 58 border-width: 4px; 59 } 60 61 .top { 62 margin-bottom: 10px; /* TODO: not specified in spec */ 63 bottom: 100%; 64 } 65 66 .right { 67 margin-left: 10px; /* TODO: not specified in spec */ 68 left: 100%; 69 } 70 71 .bottom { 72 top: 100%; 73 margin-top: 10px; /* TODO: not specified in spec */ 74 } 75 76 .left { 77 margin-right: 10px; /* TODO: not specified in spec */ 78 right: 100%; 79 } 80 81 .polymer-tooltip.bottom::after { 82 bottom: 100%; 83 left: calc(50% - 4px); 84 border-bottom-color: rgba(0,0,0,0.8); 85 } 86 87 .polymer-tooltip.left::after { 88 left: 100%; 89 top: calc(50% - 4px); 90 border-left-color: rgba(0,0,0,0.8); 91 } 92 93 .polymer-tooltip.top::after { 94 top: 100%; 95 left: calc(50% - 4px); 96 border-top-color: rgba(0,0,0,0.8); 97 } 98 99 .polymer-tooltip.right::after { 100 right: 100%; 101 top: calc(50% - 4px); 102 border-right-color: rgba(0,0,0,0.8); 103 } 104
