Javascript 在svg中将工具提示显示为div或组件？

我想在svg图表上显示工具提示。在mouseover（mouseenter，mouseleave）上以有角度显示。我怎么做？如果我可以使用div，svg就不知道“div”。我可以使用组件吗？当我在圆圈上移动鼠标时，我想显示一些信息。现在我只展示价值。当一些圆相互重叠时，如何在一个div/组件中显示所有。我想用值显示所有行的名称

<svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="graph"
     aria-labelledby="title">
  <g *ngFor="let dataArray of data2.valueP; let i = index" [attr.fill]="data2.colorArray[i]">
    <g *ngFor="let data of dataArray; let k = index" >
      <circle [attr.cx]="134+(1470/dataArray.length)*k" [attr.cy]="800*(1-(dataArray[k]/data2.maxR))"
              [attr.r]="3" (mouseover)="chartHovered(dataArray[k])">{{ dataArray.length }}</circle>
      <title>{{dataArray[k] }}</title>
      <line *ngIf="800*(1-(dataArray[k+1]/data2.maxR))>0" [attr.x1]="134+(1470/dataArray.length)*k"
            [attr.y1]="800*(1-(dataArray[k]/data2.maxR))" [attr.x2]="134+(1470/dataArray.length)*(k+1)"
            [attr.y2]="800*(1-(dataArray[k+1]/data2.maxR))" style="stroke-width:2" [attr.stroke]="data2.colorArray[i]"/>
    </g>
  </g>
</svg>

{{dataArray.length}
{{dataArray[k]}

---

感谢您的建议和提示。

最简单的方法是通过SVG子元素。是的，我现在使用它……以及如何在标题中显示其他曲线的值？如果圆圈相互重叠。如果你想显示一些复合标题，请将圆圈放在a中，并给a标题子项。请给我一些示例？