1 <!doctype html> 2 <!-- 3 @license 4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 5 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 7 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 8 Code distributed by Google as part of the polymer project is also 9 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 10 --> 11 <html lang="en"> 12 <head> 13 <title>paper-tooltip demo</title> 14 <meta charset="utf-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 16 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> 17 18 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 19 <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> 20 <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> 21 <link rel="import" href="../../iron-icons/iron-icons.html"> 22 <link rel="import" href="../../paper-icon-button/paper-icon-button.html"> 23 <link rel="import" href="../../paper-styles/color.html"> 24 <link rel="import" href="../paper-tooltip.html"> 25 <link rel="import" href="test-button.html"> 26 27 <style is="custom-style" include="demo-pages-shared-styles"> 28 paper-icon-button, input, .avatar { 29 margin: 0 10px; 30 } 31 32 .avatar { 33 box-sizing: border-box; 34 width: 40px; 35 height: 40px; 36 padding: 8px; 37 border-radius: 50%; 38 cursor: pointer; 39 } 40 41 .blue { 42 background-color: var(--paper-light-blue-300); 43 } 44 .orange { 45 background-color: var(--paper-amber-500); 46 } 47 .green { 48 background-color: var(--paper-green-500); 49 } 50 .red { 51 background-color: var(--paper-pink-500); 52 } 53 </style> 54 </head> 55 <body unresolved> 56 <div class="vertical-section-container centered"> 57 <h3>Tooltips can be anchored to elements using their ID</h3> 58 <demo-snippet class="centered-demo"> 59 <template> 60 <paper-icon-button id="id_1" icon="favorite" alt="heart"></paper-icon-button> 61 <paper-icon-button id="id_2" icon="alarm-on" alt="go back"></paper-icon-button> 62 <div id="id_3" class="avatar blue" tabindex="0"></div> 63 <div id="id_4" class="avatar orange" tabindex="0"></div> 64 65 <!-- paper-icon-buttons have an inherent padding that will push the tooltip down. offset undoes it --> 66 <paper-tooltip for="id_1" offset="0"><3 <3 <3 </paper-tooltip> 67 <paper-tooltip for="id_2" offset="0">wake up!</paper-tooltip> 68 <paper-tooltip for="id_3" offset="0">halp I am trapped in a tooltip</paper-tooltip> 69 <paper-tooltip for="id_4" offset="0">meow!</paper-tooltip> 70 </template> 71 </demo-snippet> 72 73 <h3>Tooltips can be anchored to elements relative to their parent</h3> 74 <demo-snippet class="centered-demo"> 75 <template> 76 <!-- Adding a tabindex so that we can show the tooltip when the whole box is tabbed to --> 77 <div tabindex="0"> 78 <input type="checkbox">allosaurus 79 <paper-tooltip>the name means "different lizard"</paper-tooltip> 80 </div> 81 <div tabindex="0"> 82 <input type="checkbox">brontosaurus 83 <paper-tooltip>the name means "thunder lizard"</paper-tooltip> 84 </div> 85 <div tabindex="0"> 86 <input type="checkbox">megalosaurus 87 <paper-tooltip>the name means "roof lizard"</paper-tooltip> 88 </div> 89 </div> 90 </template> 91 </demo-snippet> 92 93 <h3>Tooltips can open in different directions</h3> 94 <demo-snippet class="centered-demo"> 95 <template> 96 <div id="dir_1" class="avatar red" tabindex="0"></div> 97 <div id="dir_2" class="avatar blue" tabindex="0"></div> 98 <div id="dir_3" class="avatar green" tabindex="0"></div> 99 <div id="dir_4" class="avatar orange" tabindex="0"></div> 100 101 <paper-tooltip for="dir_1" position="left" animation-delay="0"></paper-tooltip> 102 <paper-tooltip for="dir_2" position="right" animation-delay="0"></paper-tooltip> 103 <paper-tooltip for="dir_3" position="top" animation-delay="0"></paper-tooltip> 104 <paper-tooltip for="dir_4" position="bottom" animation-delay="0"></paper-tooltip> 105 </template> 106 </demo-snippet> 107 108 <h3>Tooltips can contain rich text (though against the Material Design spec)</h3> 109 <demo-snippet class="centered-demo"> 110 <template> 111 <style is="custom-style"> 112 paper-tooltip.custom img { 113 width: 40px; 114 padding-right: 10px; 115 padding-bottom: 10px; 116 float: left; 117 } 118 .custom { 119 --paper-tooltip-background: black; 120 --paper-tooltip-text-color: var(--paper-pink-100); 121 width: 160px; 122 } 123 </style> 124 <paper-icon-button id="demo4_icon1" icon="favorite" alt="heart"></paper-icon-button> 125 <paper-tooltip for="demo4_icon1" class="custom" animation-delay="0"> 126 <img src="http://i.imgur.com/OuUe8Da.jpg"> 127 Rich-text tooltips are doable but against the Material Design spec. 128 </paper-tooltip> 129 </template> 130 </demo-snippet> 131 </div> 132 </body> 133 </html> 134
