| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 6 Code distributed by Google as part of the polymer project is also | 6 Code distributed by Google as part of the polymer project is also |
| 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 8 --><html><head><link rel="import" href="../polymer/polymer.html"> | 8 --><html><head><link rel="import" href="../polymer/polymer.html"> |
| 9 <link rel="import" href="../neon-animation/neon-animation-runner-behavior.html"> | 9 <link rel="import" href="../neon-animation/neon-animation-runner-behavior.html"> |
| 10 <link rel="import" href="../neon-animation/animations/fade-in-animation.html"> | 10 <link rel="import" href="../neon-animation/animations/fade-in-animation.html"> |
| 11 <link rel="import" href="../neon-animation/animations/fade-out-animation.html"> | 11 <link rel="import" href="../neon-animation/animations/fade-out-animation.html"> |
| 12 |
| 12 <!-- | 13 <!-- |
| 14 Material design: [Tooltips](https://www.google.com/design/spec/components/toolti
ps.html) |
| 13 | 15 |
| 14 `<paper-tooltip>` is a label that appears on hover and focus when the user | 16 `<paper-tooltip>` is a label that appears on hover and focus when the user |
| 15 hovers over an element with the cursor or with the keyboard. It will be centered | 17 hovers over an element with the cursor or with the keyboard. It will be centered |
| 16 to an anchor element specified in the `for` attribute, or, if that doesn't exist
, | 18 to an anchor element specified in the `for` attribute, or, if that doesn't exist
, |
| 17 centered to the parent node containing it. | 19 centered to the parent node containing it. |
| 18 | 20 |
| 19 Example: | 21 Example: |
| 20 | 22 |
| 21 <div style="display:inline-block"> | 23 <div style="display:inline-block"> |
| 22 <button>Click me!</button> | 24 <button>Click me!</button> |
| (...skipping 28 matching lines...) Expand all Loading... |
| 51 --> | 53 --> |
| 52 | 54 |
| 53 </head><body><dom-module id="paper-tooltip"> | 55 </head><body><dom-module id="paper-tooltip"> |
| 54 <template> | 56 <template> |
| 55 <style> | 57 <style> |
| 56 :host { | 58 :host { |
| 57 display: block; | 59 display: block; |
| 58 position: absolute; | 60 position: absolute; |
| 59 outline: none; | 61 outline: none; |
| 60 z-index: 1002; | 62 z-index: 1002; |
| 63 -moz-user-select: none; |
| 64 -ms-user-select: none; |
| 65 -webkit-user-select: none; |
| 66 user-select: none; |
| 67 cursor: default; |
| 61 } | 68 } |
| 62 | 69 |
| 63 #tooltip { | 70 #tooltip { |
| 64 display: block; | 71 display: block; |
| 65 outline: none; | 72 outline: none; |
| 66 @apply(--paper-font-common-base); | 73 @apply(--paper-font-common-base); |
| 67 font-size: 10px; | 74 font-size: 10px; |
| 75 line-height: 1; |
| 68 | 76 |
| 69 background-color: var(--paper-tooltip-background, #616161); | 77 background-color: var(--paper-tooltip-background, #616161); |
| 70 opacity: var(--paper-tooltip-opacity, 0.9); | 78 opacity: var(--paper-tooltip-opacity, 0.9); |
| 71 color: var(--paper-tooltip-text-color, white); | 79 color: var(--paper-tooltip-text-color, white); |
| 72 | 80 |
| 73 padding: 8px; | 81 padding: 8px; |
| 74 border-radius: 2px; | 82 border-radius: 2px; |
| 75 | 83 |
| 76 @apply(--paper-tooltip); | 84 @apply(--paper-tooltip); |
| 77 } | 85 } |
| 78 | 86 |
| 79 /* Thanks IE 10. */ | 87 /* Thanks IE 10. */ |
| 80 .hidden { | 88 .hidden { |
| 81 display: none !important; | 89 display: none !important; |
| 82 } | 90 } |
| 83 </style> | 91 </style> |
| 84 | 92 |
| 85 <div id="tooltip" class="hidden"> | 93 <div id="tooltip" class="hidden"> |
| 86 <content></content> | 94 <content></content> |
| 87 </div> | 95 </div> |
| 88 </template> | 96 </template> |
| 89 | 97 |
| 90 </dom-module> | 98 </dom-module> |
| 91 <script src="paper-tooltip-extracted.js"></script></body></html> | 99 <script src="paper-tooltip-extracted.js"></script></body></html> |
| OLD | NEW |