Angular

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。

任何 ide 我怎样才能做到这一点？

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 元素放置不是动态的，那么您可以将其全部放在样式 sheet 中。就我而言，我有多个工具提示需要附加到具有不同宽度和位置的元素。您还可以删除 class 并将所有样式添加到 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>

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

Angular - Add tooltip to SVG element

svg

tooltip