2

I have an SVG element on my web site:

<ellipse id="svg_2" cy="78.999999" cx="1042.499999" stroke-width="1.5" stroke="#000" fill="#fff"/>

I want to add tooltip to this element. I tried NGPrime and NGX-bootstrap but tooltip does not show on this element (it works when I add this to any other element on my web site).

I'm working with Angular 4 CLI.

Any ide how I can acheive that?

Sepcio
  • 235
  • 1
  • 6
  • 17
  • 2
    You can add a `` child element, as suggested in [this answer](https://stackoverflow.com/a/10643523/1009922), and as shown in [this stackblitz](https://stackblitz.com/edit/angular-k3nc1c). – ConnorsFan Oct 03 '18 at 15:32
  • 1
    Possible duplicate of [How to add a tooltip to an svg graphic?](https://stackoverflow.com/questions/10643426/how-to-add-a-tooltip-to-an-svg-graphic) – ConnorsFan Oct 03 '18 at 15:33
  • @ConnorsFan Don't think it's a duplicate as this is specific to Angular. – Katharine Osborne Nov 28 '18 at 13:50
  • The `` does not work for me. – Katharine Osborne Nov 28 '18 at 13:55
  • @KatharineOsborne - The `` element works in Angular, as shown in [this stackblitz](https://stackblitz.com/edit/angular-k3nc1c). If it doesn't work for you, please provide a stackblitz showing the problem. – ConnorsFan Nov 28 '18 at 14:09
  • @ConnorsFan The stackblitz doesn't work for me. Could be a browser issue (I'm using Chrome 70 on Mac). – Katharine Osborne Nov 28 '18 at 14:24
  • @KatharineOsborne - Strange. It works for me in Chrome 70 and Firefox, on Windows and Mac. – ConnorsFan Nov 28 '18 at 14:32
  • 1
    Ah, I was not hovering for long enough on the stackblitz. Also I'm using ngbtooltip, which does not work with the `` method (apparently this method will create a div inside the svg which angular will not render). – Katharine Osborne Nov 28 '18 at 14:37

2 Answers2

0

I was having the same problem with ngbootstrap. It turns out that the tooltip creates a div, and if it is inside an svg, Angular will not render it. So my solution was to create a little html mask over the area of the svg where I wanted to trigger the tooltip.

HTML:

<div>
    <svg>
        <ellipse id="svg_2" cy="78.999999" cx="1042.499999" stroke-width="1.5" stroke="#000" fill="#fff"/>
    </svg>
    <div ngbTooltip="My tooltip" class="mytooltip" triggers="hover:blur click:blur focus:blur" [ngStyle]="{ 'left.px': leftPosition, 'top.px': topPosition }"></div>
</div>

Where leftPosition and topPosition are set dynamically in your ts file.

SCSS/CSS:

.mytooltip {
    position: absolute;
    width: 10px; //whatever is a reasonable hit area
    height: 10px;
}

If your svg element placement is not dynamic, then you could just put it all in the style sheet. In my case, I had multiple tooltips I needed to attach to elements with varying widths and positions. You could also drop the class and add all the styling to ngStyle.

This method is probably not good for massively dynamic or interactive svgs, such as with D3.js, but that has it's own tooltip system anyway.

Katharine Osborne
  • 6,571
  • 6
  • 32
  • 61
0

Wrap the svg element in a span that has the tooltip:

<span ngbTooltip="This will show when I hover over this svg">
  <svg>
    <ellipse id="svg_2" cy="78.999999" cx="1042.499999" stroke-width="1.5" stroke="#000" fill="#fff"/>
  </svg>
</span>
Andrew Tibbetts
  • 2,874
  • 3
  • 23
  • 28