纸质工具提示未显示

Question

我有以下代码，当图表悬停在上面时，它似乎应该显示<paper-tooltip> ，但它没有。 悬停会导致 DOM 中的<paper-tooltip>节点更新，但不会显示。 我究竟做错了什么？

<svg id="svg_fbff5dd2-1724-4f3d-a0b2-2fbe41d75e89" width="600" height="450">
  <g>
    <line opacity="1" x1="167.0000000000005" y1="225.00001160643953" x2="121.49166679382381" y2="220.40001302639112" style="stroke: #A9A9A9; stroke-width: 1"></line>

    <g>
      <defs>
        <radialGradient id="radialGradient_0_fbff5dd2-1724-4f3d-a0b2-2fbe41d75e89" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse">
          <stop offset="40%" stop-color="#DBDBDB"></stop>
          <stop offset="100%" stop-color="#777777"></stop>
        </radialGradient>
      </defs>
      <path id="pieWedge_0_fbff5dd2-1724-4f3d-a0b2-2fbe41d75e89" class="pie-chart-wedge" fill="url(#radialGradient_0_fbff5dd2-1724-4f3d-a0b2-2fbe41d75e89)" d="M300,225 L435,225 A135,135 0 1 1 434.99999999999795,224.99997643805509z"></path> 

      <paper-tooltip position="right" animation-delay="0.5" fittovisiblebounds="true" role="tooltip" tabindex="-1" class="x-scope paper-tooltip-0" style="left: 279.15px; top: 1841.22px;">
        <div id="tooltip" class="style-scope paper-tooltip" hidden="">
          Austin Office: 100.0
        </div>
      </paper-tooltip>

      <rect opacity="1" fill="white" style="stroke: #A9A9A9; stroke-width: 1" x="92.98333358764705" y="213.5000129310237" width="57.016666412353516" height="13.800000190734863"></rect>
      <text class="pie-label-fbff5dd2-1724-4f3d-a0b2-2fbe41d75e89" opacity="1" x="94.98333358764705" y="225.0000130899694" font-size="11" textLength="53.016666412353516" lengthAdjust="spacingAndGlyphs">Austin Office</text>
    </g>

    <circle cx="300" cy="225" r="54" fill="white"></circle>
  </g>
</svg>

我正在使用以下方法添加工具提示：

var paperTT = document.createElement("paper-tooltip");
paperTT.setAttribute("position", "right");
paperTT.setAttribute("animation-delay", "0.5");
paperTT.setAttribute("fitToVisibleBounds", "true");
paperTT.textContent = this.name + ": " + (this.fraction * 100).toFixed(1);
group.appendChild(paperTT);

Answer 1

<paper-tooltip>应该在<svg> ，并将<paper-tooltip>.for设置为悬停目标的元素 ID（大概是饼图）。

<paper-tooltip for="pieWedge">
  Austin Office: 100.0
</paper-tooltip>

<svg>
  ...
  <path id="pieWedge">...</path>
</svg>

 HTMLImports.whenReady(() => { Polymer({ is: 'x-foo' }); });

 <head> <base href="https://polygit.org/polymer+1.7.1/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="polymer/polymer.html"> <link rel="import" href="paper-tooltip/paper-tooltip.html"> </head> <body> <x-foo></x-foo> <dom-module id="x-foo"> <template> <paper-tooltip for="pieWedge" position="right" animation-delay="0.5" fittovisiblebounds tabindex="-1" style="left: 279.15px; top: 1841.22px;"> Austin Office: 100.0 </paper-tooltip> <svg id="svg" width="600" height="450"> <g> <line opacity="1" x1="167.0000000000005" y1="225.00001160643953" x2="121.49166679382381" y2="220.40001302639112" style="stroke: #A9A9A9; stroke-width: 1"></line> <g> <defs> <radialGradient id="radialGradient_0_fbff5dd2-1724-4f3d-a0b2-2fbe41d75e89" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" gradientUnits="userSpaceOnUse"> <stop offset="40%" stop-color="#DBDBDB"></stop> <stop offset="100%" stop-color="#777777"></stop> </radialGradient> </defs> <path id="pieWedge" class="pie-chart-wedge" fill="url(#radialGradient_0_fbff5dd2-1724-4f3d-a0b2-2fbe41d75e89)" d="M300,225 L435,225 A135,135 0 1 1 434.99999999999795,224.99997643805509z"></path> <rect opacity="1" fill="white" style="stroke: #A9A9A9; stroke-width: 1" x="92.98333358764705" y="213.5000129310237" width="57.016666412353516" height="13.800000190734863"></rect> <text class="pie-label-fbff5dd2-1724-4f3d-a0b2-2fbe41d75e89" opacity="1" x="94.98333358764705" y="225.0000130899694" font-size="11" textLength="53.016666412353516" lengthAdjust="spacingAndGlyphs"> Austin Office </text> </g> <circle cx="300" cy="225" r="54" fill="white"></circle> </g> </svg> </template> </dom-module> </body>

代码笔

纸质工具提示未显示

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-01-17 19:17:27

纸质工具提示未显示

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-01-17 19:17:27

解决方案1
1 已采纳 2017-01-17 19:17:27