Question

我需要为分配给我的项目学习Polymer.js，我正在尝试做一些教程。

我正在尝试使用paper-tooltip元素并创建了以下代码，但是由于某种原因，出现了工具提示，但是看不到任何文本。

仅供参考：他们仍在使用Polymer 2.0，我无法更改该atm。

有人能发现我的错误吗？

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/paper-tooltip/paper-tooltip.html">

<dom-module id="app-root">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <h2>Hello [[prop1]]!</h2>

    <div>
      <button id="btn">Click me!</button>
      <paper-tooltip for="btn" position="bottom">
        Tooltip!!
      </paper-tooltip>
    </div>
  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class AppRoot extends Polymer.Element {
      static get is() { return 'app-root'; }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'app-root'
          }
        };
      }
    }

    window.customElements.define(AppRoot.is, AppRoot);
  </script>
</dom-module>

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>Polymer Test Environment</title>
    <meta name="description" content="Polymer Test">

    <link rel="manifest" href="/manifest.json">

    <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
    <link rel="import" href="/bower_components/polymer/polymer.html">

    <link rel="import" href="/src/app-root/app-root.html">

    <style>
      body {
        height: 100vh
      }
    </style>
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

Answer 1

运行您的代码没有问题。该应用程序显示带有按钮和工具提示。

一些提示：

请勿在{{1}}中导入polymer.html。如果需要，请在组件导入中执行。
请注意导入的URL。首先，index.html将成为一条绝对路径（使其从根导入）。
使用/代替webcomponents-lite.js。 webcomponents-loader.js唯一与众不同的地方是与webcomponents-loader.js一起使用时。否则，只需加载所有polyfill。

这是我上传到Github的工作项目。我不确定您的结构，因此我只将它们包括在所有根文件夹中。我只修改了导入代码，其他所有都保持不变。

https://github.com/binhbbbb/app-root

Answer 2

在这部分代码中这不是问题。因为如果我运行它，我只是得到工具提示，当我将鼠标悬停在按钮上时（您只能在Chrome中运行以下代码）

<base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0/lib/">

<script src="webcomponentsjs/webcomponents-loader.js"></script>

<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="paper-tooltip/paper-tooltip.html">

<dom-module id="app-root">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <h2>Hello [[prop1]]!</h2>

    <div>
      <button id="btn">Click me!</button>
      <paper-tooltip for="btn" position="bottom">
        Tooltip!!
      </paper-tooltip>
    </div>
  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class AppRoot extends Polymer.Element {
      static get is() {
        return 'app-root';
      }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'app-root'
          }
        };
      }
    }

    window.customElements.define(AppRoot.is, AppRoot);
  </script>
</dom-module>

<app-root></app-root>

聚合物纸工具提示

2 个答案: