在 HTML 頁面中的同一 position 放置多個工具提示

Question

一個 HTML 頁面包含 2 個 SVG 形狀，每個形狀都有一個工具提示（使用Tippy創建）。

我怎樣才能使工具提示出現在頁面中的相同 position 中（假設在下面的紅色矩形中 - 頁面右側）？

 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

根據定義，工具提示是在 cursor 所在的位置彈出的東西。

如果您需要將彈出文本設置為在其他位置顯示，只需使用純 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>