1 files changed, 211 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/core-tooltip/demo.html b/catapult/third_party/polymer/components/core-tooltip/demo.html
new file mode 100644
index 00000000..7ea6aea9
--- /dev/null
+++ b/catapult/third_party/polymer/components/core-tooltip/demo.html
@@ -0,0 +1,211 @@
+<!--
+    @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. &rarr;
+          </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>