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

debugcn 发表于 Dev

6PO0222

一个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>

克里斯蒂安

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

如果您需要设置弹出文本以在其他地方显示，只需使用纯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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。