聚合物紙工具提示

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