在 HTML 页面中的相同位置放置多个工具提示

Question

一个 HTML 页面包含 2 个 SVG 形状，每个都有一个工具提示（使用 Tippy 创建）。

如何使工具提示出现在页面中的相同位置（假设在下面的红色矩形中 - 页面右侧）？

tippy('#circle_1', {
  content: `That's a circle !`,
  arrow: false,
});

tippy('#rect_1', {
  content: 'Here is a rectangle !',
  arrow: false,
});

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

<svg width="250" height="250">
      <circle id="circle_1" cx="30" cy="45" r="25" />
      
      <rect id="rect_1" x="80" y="25" width="60" height="40" />
      
      <rect id="placeholder" x=150 y=25 width="100" height="50" fill-opacity="0" stroke="red" stroke-width="1" />
</svg>

Answer 1

根据定义，工具提示是在光标所在的位置弹出的内容。

如果您需要将弹出文本设置为在其他地方显示，只需使用普通 js/jquery

$(".tooltip-elem").hover(function(){
  var tooltipText = $(this).data("tooltip");
  //console.log(tooltipText);
  $("#placeholder1").html( tooltipText );
});
$(".tooltip-elem").on("mouseleave", function(){
  $("#placeholder1").html( "" );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg style="display: inline-block;" width="250" height="150">
      <circle class="tooltip-elem" id="circle_1" cx="30" cy="45" r="25" data-tooltip="That's a circle !" />
      
      <rect class="tooltip-elem" id="rect_1" x="80" y="25" width="60" height="40" data-tooltip="Here is a rectangle !" />
      
</svg>
      <div style="display: inline-block;" id="placeholder1"></div>

在 HTML 页面中的相同位置放置多个工具提示

Placing multiple tooltips at the same position in a HTML page

html

javascript

svg

tippyjs