Почему Angular matTooltip не работает, когда вы добавляете его динамически?

У меня есть элемент SVG, и я хочу добавить matTooltip в какой-то момент в Angular. Я заметил, что если я попытаюсь добавить matTooltip следующим образом:

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)
}

используя тестовый HTML-код:

<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>

это не работает.

В чем именно проблема в данной ситуации?

Не могли бы вы предоставить полный пример на stackblitz?

Amit Baranes 21.05.2019 15:22

Я точно не знаю, как использовать его с материалом Angular.

Daniel T. 21.05.2019 15:29

использование может использовать этот шаблон: stackblitz.com/edit/angular-mat-tooltip

Amit Baranes 21.05.2019 15:39

Подойдет ли для этого атрибут title? Вам действительно нужен matTooltip?

R. Richards 21.05.2019 17:21

Название немного медленное, и я хочу добавить к нему немного стиля.

Daniel T. 21.05.2019 20:58

У вас есть решение?

Ramesh Rajendran 28.01.2020 12:08
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
3
6
4 969
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Это не работает, потому что Angular в TS является скомпилированным языком.

Это означает, что [matTooltip] может что-то значить для компилятора TS, но для JS оно того стоит.

Angular не использует атрибуты элемента для отображения всплывающей подсказки. Вместо этого (если я не ошибаюсь) он использует рендеринг динамических компонентов, чтобы обеспечить полноценный компонент с абсолютным позиционированием.

Если вы добавите всплывающую подсказку таким образом, это будет то же самое, что ничего не делать.

Добавив его в свой шаблон. Потому что, как вы, похоже, этого не знаете, очень плохая практика самостоятельно манипулировать DOM в Angular.

user4676340 21.05.2019 15:54

Проблема в том, что я генерирую svg динамически, поэтому я не могу этого сделать.

Daniel T. 21.05.2019 15:55

Учитывая SVG, вы вполне можете это сделать.

user4676340 21.05.2019 15:59

Это был просто пример. SVG изначально пуст, и я генерирую его onInit на основе некоторых данных, таких как функция generate(). Или, может быть, я не совсем понимаю, что вы имеете в виду, чтобы добавить его в шаблон.

Daniel T. 21.05.2019 16:03

Вы хотите не использовать matTooltip, а просто создать и добавить всплывающую подсказку после?

Daniel T. 21.05.2019 16:11

Я имею в виду, что вы используете в своих *.html файлах, так называемых шаблонах. Что касается SVG, вы можете создать заполнитель SVG и прикрепить к нему всплывающую подсказку. Вы также можете использовать библиотеку, чтобы оставаться в контексте Angular и рисовать свой SVG (я помню, как использовал SnapSVG около года назад).

user4676340 21.05.2019 16:14

вариант заполнителя может быть хорошей идеей, даже если я не знаю, сколько элементов у меня будет в конечном итоге. Просто создайте группу в начале. Snap SVG, который я пробовал в начале, но не смог заставить его работать на angular

Daniel T. 21.05.2019 17:04

Ваш пробег может отличаться, но это то, что я сделал, чтобы преодолеть это. Создайте одну всплывающую подсказку для страницы и просто меняйте ее положение, когда вы наводите курсор на определенный объект.

В вашем html-файле

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

В вашем .ts файле

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();

})


Другие вопросы по теме