角度 - 将工具提示添加到 SVG 元素

Question

我的网站上有一个SVG元素：

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

我想向此元素添加工具提示。我尝试了NGPrime和NGX-bootstrap，但工具提示没有显示在这个元素上(当我将其添加到我网站上的任何其他元素时，它有效(。

我正在使用Angular 4 CLI。

我怎样才能做到这一点？

Answer 1

我在ngbootstrap上遇到了同样的问题。事实证明，工具提示创建了一个div，如果它位于svg中，则Angular不会渲染它。所以我的解决方案是在我想触发工具提示的 svg 区域创建一个小的 html 掩码。

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

在ts文件中动态设置leftPosition和topPosition的位置。

SCSS/CSS：

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

如果你的 svg 元素放置不是动态的，那么你可以把它全部放在样式表中。就我而言，我需要将多个工具提示附加到具有不同宽度和位置的元素上。您也可以删除类并将所有样式添加到ngStyle。

此方法可能不适用于大规模动态或交互式 svg，例如 D3.js，但无论如何它都有自己的工具提示系统。

Answer 2

将svg元素包装在具有工具提示的span中：

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