| <!-- |
| @license |
| Copyright (c) 2015 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 |
| --> |
| <!doctype html> |
| <html lang="en"> |
| <head> |
| |
| <meta charset="utf-8"> |
| <title>Core Tooltip</title> |
| |
| <script src="../webcomponentsjs/webcomponents.js"></script> |
| |
| <link rel="import" href="../core-icon-button/core-icon-button.html"> |
| <link rel="import" href="../paper-fab/paper-fab.html"> |
| <link rel="import" href="core-tooltip.html"> |
| |
| <style> |
| body { |
| font-family: "Open Sans", sans-serif; |
| font-weight: 300; |
| padding: 24px; |
| } |
| |
| .example { |
| margin: 35px 15px; |
| } |
| |
| .example > * { |
| margin: 0 15px; |
| } |
| |
| .fakebutton { |
| box-shadow: 0 0 3px #aaa inset; |
| border-radius: 3px; |
| padding: 7px 5px; |
| } |
| .fakebutton:hover { |
| background-color: white; |
| } |
| |
| img { |
| width: 400px; |
| height: 150px; |
| object-fit: cover; |
| } |
| |
| img.large { |
| border: 15px solid white; |
| box-sizing: border-box; |
| } |
| |
| .profile { |
| width: 60px; |
| height: auto; |
| border-radius: 50%; |
| vertical-align: middle; |
| } |
| |
| a { |
| color: currentcolor; |
| text-decoration: none; |
| } |
| |
| .rich { |
| background: hotpink; |
| color: white; |
| padding:20px; |
| border-radius: 5px; |
| } |
| |
| </style> |
| |
| <style shim-shadowdom> |
| core-tooltip.fancy::shadow .core-tooltip { |
| opacity: 0; |
| -webkit-transition: all 300ms cubic-bezier(0,1.92,.99,1.07); |
| transition: all 300ms cubic-bezier(0,1.92,.99,1.07); |
| -webkit-transform: translate3d(0, -10px, 0); |
| transform: translate3d(0, -10px, 0); |
| } |
| |
| core-tooltip.fancy:hover::shadow .core-tooltip, |
| core-tooltip.fancy:focus::shadow .core-tooltip { |
| opacity: 1; |
| -webkit-transform: translate3d(0, 0, 0); |
| transform: translate3d(0, 0, 0); |
| } |
| </style> |
| |
| </head> |
| <body unresolved> |
| |
| <article> |
| |
| <button>Toggle all</button> |
| |
| <section class="small" layout horizontal center-center> |
| |
| <div class="example"> |
| |
| <core-tooltip label='position="left"' position="left"> |
| <core-icon-button icon="drawer"></core-icon-button> |
| </core-tooltip> |
| |
| <core-tooltip label='position="top"' position="top"> |
| <core-icon-button icon="drawer"></core-icon-button> |
| </core-tooltip> |
| |
| <core-tooltip label='position="bottom"' position="bottom"> |
| <core-icon-button icon="drawer"></core-icon-button> |
| </core-tooltip> |
| |
| <core-tooltip label='position="right"' position="right"> |
| <core-icon-button icon="drawer"></core-icon-button> |
| </core-tooltip> |
| |
| </div> |
| |
| <div class="example"> |
| |
| <core-tooltip label="Fancy effect" class="fancy"> |
| <paper-fab icon="add"></paper-fab> |
| </core-tooltip> |
| |
| </div> |
| |
| </section> |
| |
| <section layout horizontal center-center> |
| |
| <div class="example"> |
| |
| <core-tooltip> |
| <div class="rich">Rich tooltip with HTML</div> |
| <div tip> |
| <img src="https://pbs.twimg.com/profile_images/378800000548263523/c110b0a4c3e3e4d3dcce1d2020f3eded.jpeg |
| " class="profile" style="width: 40px;margin-right: 8px;">Eric <b>Bidelman</b> - <a href="#">@ebidel</a></div> |
| </core-tooltip> |
| |
| </div> |
| |
| <div class="example"> |
| |
| <core-tooltip label="<core-tooltip large>" large> |
| Larger tooltips for mobile |
| </core-tooltip> |
| |
| </div> |
| |
| <div class="example"> |
| |
| <core-tooltip label="disabled" disabled> |
| Disabled Tooltip |
| </core-tooltip> |
| |
| </div> |
| |
| </section> |
| |
| <section layout horizontal center-center> |
| |
| <div class="example"> |
| |
| <core-tooltip label="Tooltip with no arrow and always on: <core-tooltip noarrow show>" position="bottom" noarrow show> |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/building.jpg" class="large"> |
| </core-tooltip> |
| |
| </div> |
| |
| </section> |
| |
| <section layout horizontal center-center> |
| |
| <div class="example"> |
| |
| <core-tooltip id="dynamic" show> |
| Tooltips are only shown (on hover) when a label is set<br> or a html rich snippet is given. → |
| </core-tooltip> |
| <button id="fillbutton">Fill tooltip</button> |
| |
| </div> |
| |
| </section> |
| |
| </article> |
| |
| <script> |
| document.querySelector('button').addEventListener('click', function(e) { |
| var tooltips = document.querySelectorAll('core-tooltip'); |
| Array.prototype.forEach.call(tooltips, function(tooltip) { |
| tooltip.show = !tooltip.show; |
| }); |
| }); |
| |
| document.querySelector('#fillbutton').addEventListener('click', function(e) { |
| e.stopPropagation(); |
| |
| var el = document.querySelector('#dynamic'); |
| el.insertAdjacentHTML('beforeend', '<div tip><b>See</b>. Told ya so!</div>'); |
| |
| }); |
| </script> |
| |
| </body> |
| </html> |
