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>

codepen

纸 - 工具提示没有显示出来

1 个答案: