Angular - 向 SVG 元素添加工具提示答案

【问题标题】：Angular - Add tooltip to SVG elementAngular - 向 SVG 元素添加工具提示
【发布时间】：2019-03-08 21:15:18
【问题描述】：

我的网站上有一个 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。

知道如何实现吗？

【问题讨论】：

您可以添加<title> 子元素，如this answer 中的建议和this stackblitz 中所示。
How to add a tooltip to an svg graphic?的可能重复
@ConnorsFan 不要认为这是重复的，因为这是 Angular 特有的。
<title> 对我不起作用。
啊，我在 stackblitz 上徘徊的时间不够长。另外我正在使用 ngbtooltip，它不适用于 <title> 方法（显然这种方法会在 svg 中创建一个 div，而 Angular 不会呈现）。

标签： angular svg tooltip

【解决方案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，但无论如何它都有自己的工具提示系统。

【讨论】：

【解决方案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>

【讨论】：