У меня есть элемент 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>
это не работает.
В чем именно проблема в данной ситуации?
Я точно не знаю, как использовать его с материалом Angular.
использование может использовать этот шаблон: stackblitz.com/edit/angular-mat-tooltip
Подойдет ли для этого атрибут title
? Вам действительно нужен matTooltip
?
Название немного медленное, и я хочу добавить к нему немного стиля.
У вас есть решение?
Это не работает, потому что Angular в TS является скомпилированным языком.
Это означает, что [matTooltip]
может что-то значить для компилятора TS, но для JS оно того стоит.
Angular не использует атрибуты элемента для отображения всплывающей подсказки. Вместо этого (если я не ошибаюсь) он использует рендеринг динамических компонентов, чтобы обеспечить полноценный компонент с абсолютным позиционированием.
Если вы добавите всплывающую подсказку таким образом, это будет то же самое, что ничего не делать.
Добавив его в свой шаблон. Потому что, как вы, похоже, этого не знаете, очень плохая практика самостоятельно манипулировать DOM в Angular.
Проблема в том, что я генерирую svg динамически, поэтому я не могу этого сделать.
Учитывая SVG, вы вполне можете это сделать.
Это был просто пример. SVG изначально пуст, и я генерирую его onInit на основе некоторых данных, таких как функция generate(). Или, может быть, я не совсем понимаю, что вы имеете в виду, чтобы добавить его в шаблон.
Вы хотите не использовать matTooltip, а просто создать и добавить всплывающую подсказку после?
Я имею в виду, что вы используете в своих *.html
файлах, так называемых шаблонах. Что касается SVG, вы можете создать заполнитель SVG и прикрепить к нему всплывающую подсказку. Вы также можете использовать библиотеку, чтобы оставаться в контексте Angular и рисовать свой SVG (я помню, как использовал SnapSVG около года назад).
вариант заполнителя может быть хорошей идеей, даже если я не знаю, сколько элементов у меня будет в конечном итоге. Просто создайте группу в начале. Snap SVG, который я пробовал в начале, но не смог заставить его работать на angular
Ваш пробег может отличаться, но это то, что я сделал, чтобы преодолеть это. Создайте одну всплывающую подсказку для страницы и просто меняйте ее положение, когда вы наводите курсор на определенный объект.
В вашем 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();
})
Не могли бы вы предоставить полный пример на stackblitz?