Why doesn't Angular matTooltip work when you add it dynamically?

Question

I have an SVG element and I want to add a matTooltip at some point in Angular. I observed that if I try to add matTooltip like this:

generate() {
  var svgEle = document.getElementById("testSVG");
  var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
  rect.setAttribute('id', "rect");
  rect.setAttribute('x', "73");
  rect.setAttribute('y', "95");
  rect.setAttribute('class', "st01");
  rect.setAttribute('width', "407");
  rect.setAttribute('height', "328");
  rect.setAttribute('matTooltip', "Info about the action");
  svgEle.append(rect)
}

using html test code:

<div style="width:400px">
    <svg version="1.1" id="testSVG" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" 
    xml:space="preserve">
    <style type="text/css">
          .st01{fill:#F99191;}
          .st11{fill:#92B1F7;}
    </style>
    <rect x="638.5" y="146" class="st11" width="236" height="219" 
    matTooltip="Info about the action"/>
    </svg> 
</div>
<button mat-stroked-button (click)="generate()">Generate</button>

it doesn't work.

What exactly is the problem in this situation?

use can use this template : stackblitz.com/edit/angular-mat-tooltip — Amit Baranes
– Amit Baranes, Commented May 21, 2019 at 13:39
Will the title attribute work for this? Do you really need the matTooltip? — R. Richards
– R. Richards, Commented May 21, 2019 at 15:21

TmTron · Accepted Answer · 2022-08-17 15:33:51Z

5

It doesn't work because Angular in TS is a compiled language.

It means that [matTooltip] might mean something for the TS compiler, but at runtime in JavaScript it does not exist.

Angular doesn't rely on element attributes to display a tooltip. Instead (if I'm not mistaken), it uses dynamic components rendering to provide a rich component that is absolutely positioned.

If you append the tooltip like this, it's the same as doing nothing.

edited Aug 17, 2022 at 15:33

TmTron

19.7k13 gold badges109 silver badges167 bronze badges

answered May 21, 2019 at 13:40

user4676340

Sign up to request clarification or add additional context in comments.

7 Comments

user4676340 Over a year ago

By adding it in your template. Because, as you seem to not know that, it's a very bad practice to manipulate the DOM yourself in Angular.

Daniel T. Over a year ago

The problem is that I generate the svg dynamically so I cannot do that

user4676340 Over a year ago

Given the SVG, you can absolutely do that.

Daniel T. Over a year ago

That was just an example. The SVG is initially blank and I generate it onInit based on some data like in generate() function. Or maybe I don't exactly undestand what you mean to add it in the template.

user4676340 Over a year ago

I mean that you use in your *.html files, a.k.a templates. As for the SVG, you can create a SVG placeholder and attach the tooltip to it. You can also use a library to stay in the Angular context and draw your SVG (I remember using SnapSVG about a year ago).

|

iamcootis · Accepted Answer · 2020-03-10 16:49:33Z

Your mileage may vary, but this is what I did to overcome this. Create one tooltip for the page and just re-position it when you roll over a certain object.

In your html file

<div #tooltip="matTooltip" matTooltip={{tooltipMessage}}></div>

In your .ts file

import {MatTooltip} from '@angular/material';
...

@ViewChild('tooltip') tooltip: MatTooltip;
tooltipMessage: string = '';


.on('mouseover', function(d: Location, event: MouseEvent){


    me.tooltipMessage = "My tooltip message."
    me.tooltip.disabled = false;
    me.tooltip.show();

    let tip = me.tooltip._overlayRef.overlayElement;
    if(tip){
       setTimeout(()=>{
          tip.style.left = d.x+"px";
          tip.style.top = y+"px";
       })
     }

})
.on('mouseout', function(d: Location, event: MouseEvent){
     me.tooltip.hide();

})

Collectives™ on Stack Overflow

Why doesn't Angular matTooltip work when you add it dynamically?

2 Answers 2

7 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Linked

Related