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>

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

SCSS / CSS：

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

如果svg元素的位置不是动态的，则可以将其全部放在样式表中。就我而言，我需要使用多个工具提示来附加到具有不同宽度和位置的元素。您也可以删除该类，然后将所有样式添加到ngStyle。

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

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

1 个答案: