1

This is an example:

<svg>
    <g ng-repeat="rect in rectList">
        <rect ng-attr-fill="rect.fill"
              ng-attr-x="rect.x"
              ng-attr-y="rect.y"
              ng-attr-width="rect.width"
              ng-attr-height="rect.height"></rect>
    </g>
</svg>

I want to add a <md-tooltip> to each of these rects. Can I do it somehow? I am talking about the Angular Material Tooltip specifically, not any other tooltip implementation from other libraries.

morgoth84
  • 1,070
  • 2
  • 11
  • 25
  • The docs say `md-tooltip` needs to be appended to the element on which you want to display the tooltip. But the language in question is SVG which is very picky about what is allowed inside it and what isn't. The `` element can't have any children inside it. Also, it seems this angular directive can't be an attribute directive. And again, SVG is picky. I've tried several things, but I couldn't get it working. So I thought if someone else tried to do this and succeeded, he could share his example. – morgoth84 Jan 03 '16 at 13:42
  • I really don't see the point in adding examples I tried, but here you go: https://jsfiddle.net/baby4w3e/ – morgoth84 Jan 03 '16 at 20:46
  • Of course not, lol. I'm showing you code examples, not an actual demo which should be working. – morgoth84 Jan 04 '16 at 12:01

1 Answers1

0

Try to wrap it in a div and apply the md-tooltip

<div ng-repeat="status in statuses">
   <md-tooltip md-direction="right">
     {{status.description}}
    </md-tooltip>     
<svg >
   <rect width="300" height="100"   >
   </rect>          
</svg>
</div>

Here is the working Sample

Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
  • The fiddle doesn't seem to be working for me. But by looking at the code, this won't do. You're basically creating multiple SVG charts here. The SVG chunk I provided is only a part of a larger SVG I use, with a lot more things inside, so I can't create multiple SVGs. I really need to apply the tooltip to the `` element only. I could surround the `` with another `` if needed, but that's about it. – morgoth84 Jan 03 '16 at 13:46