聚合物纸工具提示

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

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

一些技巧：

不要在index.html导入polymer.html 。 如果需要，请在组件导入中执行此操作。
小心导入的URL。 首先， /将成为绝对路径（使其从根导入）。
使用webcomponents-lite.js而不是webcomponents-loader.js 。 webcomponents-loader.js的唯一情况是与async使用时。 否则，只需加载所有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 个解决方案

解决方案1
0 2018-07-10 11:45:11

解决方案2
-1 2018-07-04 08:54:52

聚合物纸工具提示

问题描述

2 个解决方案

解决方案1 0 2018-07-10 11:45:11

解决方案2 -1 2018-07-04 08:54:52

解决方案1
0 2018-07-10 11:45:11

解决方案2
-1 2018-07-04 08:54:52