【问题标题】:Polymer 1.0: paper-tooltip not workingPolymer 1.0:纸张工具提示不起作用
【发布时间】:2015-08-15 19:39:53
【问题描述】:

我似乎无法让 <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>

【问题讨论】:

  • 您所做的一切都是正确的,您只需导入paper-icon-buttoniron-iconspaper-tooltipHere's a working JSBin
  • @KevinAshcraft:啊。谢谢。我没有意识到我仍然必须单独导入每个元素。我想我不明白如何使用magic-server 这个东西。

标签: polymer polymer-1.0 paper-elements


【解决方案1】:

来自 cmets 的总结:

根据@kevinashcraft:

您必须导入 paper-icon-button、iron-icons 和 paper-tooltip。 Here's a working JSBin.

【讨论】:

    猜你喜欢
    • 2015-09-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-08-28
    • 1970-01-01
    相关资源
    最近更新 更多