Polymer 1.0:纸质工具提示不起作用

Polymer 1.0: paper-tooltip not working

我似乎无法让 <paper-tooltip> 元素为我工作。

Here is my JSBin.

我做错了什么?

<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="http://polymer-magic-server.appspot.com/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
</head>
<body>

  <dom-module id="x-foo">
    <template>
      <style></style>
        <div class="with-tooltip" tabindex="0">
          <input type="checkbox">Oxygen
          <paper-tooltip>Atomic number: 8</paper-tooltip>
        </div>
        <paper-icon-button id="heart" icon="favorite" alt="heart"></paper-icon-button>
        <paper-icon-button id="back" icon="arrow-back" alt="go back"></paper-icon-button>
        <paper-icon-button id="fwd" icon="arrow-forward" alt="go forward"></paper-icon-button>
        <paper-tooltip for="heart" margin-top="0">&lt;3 &lt;3 &lt;3 </paper-tooltip>
        <paper-tooltip for="back" margin-top="0">halp I am trapped in a tooltip</paper-tooltip>
        <paper-tooltip for="fwd" margin-top="0">back to the future</paper-tooltip>
    </template>
    <script>

      // only need this when both (1) in the main document and
      // (2) on non-Chrome browsers
      addEventListener('WebComponentsReady', function() {

        Polymer({
          is: "x-foo"
        });

      });

    </script>
  </dom-module>

  <x-foo></x-foo>

</body>

评论总结:

根据@kevinashcraft:

You have to import paper-icon-button, iron-icons, and paper-tooltip. Here's a working JSBin.