I have the following code which seems like it should display a <paper-tooltip> when the chart is hovered over, but it does not. Hovering causes the <paper-tooltip> node in the DOM to update, but it doesn't show up. What am I doing wrong?
<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>
I'm adding the tooltip using:
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);
The <paper-tooltip> should be outside the <svg>, and set <paper-tooltip>.for to the element ID of the hover target (presumably the pie wedge).
<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>