При наведении определенных элементов SVG, я хочу всплывающие подсказки.Желательно материальные подсказки, для согласованности проекта.
Упрощенно, у меня есть родительский <svg>, который отображается в <div>.Допустим, это система координат.Внутри этой системы координат добавляется число точек.Это <g> элементы в коде ниже.Я бы хотел показывать всплывающие подсказки при наведении на них <g> элементов.
<div id="svg-container"></div>;
const namespaceURI = 'http://www.w3.org/2000/svg';
const parentSVG = document.createElementNS(namespaceURI, 'svg') as SVGElement;
const g = document.createElementNS(namespaceURI, 'g') as SVGElement;
const rect = document.createElementNS(namespaceURI, 'rect') as SVGRectElement;
const image = document.createElementNS(namespaceURI, 'image') as SVGImageElement;
g.appendChild(rect);
g.appendChild(image);
parentSVG.appendChild(g);
Я вполне уверен, что мне удастся создать всплывающие подсказки, которые выглядят как всплывающие подсказки к материалам, вручную, создав еще одну <svg>, или используя этот <foreignObject>, о котором я читал.
Но ... Есть ли способ, при котором мне не нужно создавать эти подсказки самостоятельно?Могу ли я как-нибудь использовать matTooltip для этих элементов svg?
По другому вопросу предлагается сделать что-то подобное, создав местозаполнитель svg в html с прикрепленной всплывающей подсказкой.Если так, как это сделано?За предложением не последовал пример.