我需要为我分配的一个项目学习 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>
最佳答案
我运行你的代码没有问题。该应用程序将显示按钮和工具提示。
一些提示:
- 请勿在
index.html中导入polymer.html。如果需要，可以在组件导入中执行此操作。 - 请小心您导入的网址。首先的
/将成为绝对路径(使其从根目录导入)。 - 使用
webcomponents-lite.js而不是webcomponents-loader.js。webcomponents-loader.js唯一会产生影响的情况是它与async一起使用时。否则，只需加载所有的 polyfill。
这是我上传到 Github 的工作项目。我不确定你是如何构建它的，所以我只是将它们包含在所有根文件夹中。我只修改了导入代码，其他一切保持不变。
https://github.com/binhbbbb/app-root
关于javascript - polymer 纸工具提示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51169273/