Question

我想为SVG元素的工具提示添加动态文本和样式。我可以通过添加div并设置样式（下面的红色矩形）来完成此操作。我宁愿让一个库处理它，但它们似乎都使用了SVG不支持的元素的title属性（下面的黑色矩形）。

有人可以建议这样的图书馆吗？

＆＃13;

$(document).ready(function() {
  $("rect#2").mouseover(function(e) {
    var myText = "'jQuery' tooltip.";
    $("<div class='tooltip'>" + myText + "</div>").appendTo("body");
    $("div.tooltip").css({
      top: e.clientY,
      left: e.clientX
    });
  });
  $("rect#2").mouseout(function() {
    $("div.tooltip").remove();
  });
});

＆＃13;

.tooltip {
  padding: 8px;
  border: 1px solid black;
  background-color: rgb(200, 200, 200);
  position: absolute;
  z-index: 2;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="svgDiv">
  <svg width="200" height="100">
    <rect id="1" x="30" y="30" width="50" height="50" title="myText" style="fill:black"/>
    <rect id="2" x="130" y="30" width="50" height="50" style="fill:red"/>
    Sorry, your browser does not support inline SVG.
    </svg>
  <div title="'title' tooltip.">div</div>
</div>

＆＃13;

Answer 1

我不确定你是否需要一个简单案例库。我会以不同的方式做你的片段：

make div a display：none，pointer-events：DOM的无元素
鼠标悬停发生后 - 更新其位置和可见性
通过更新工具提示DIV

$(document).ready(function() {
  $("rect#2").mouseover(function(e) {
    var myText = "'jQuery' tooltip.";
    $("div#tooltip").html(myText);
    $("div#tooltip").css({
      display: "inline-block",
      top: e.clientY,
      left: e.clientX
    });
  });
  $("rect#2").mouseout(function() {
    $("div#tooltip").css({
      top: 0,
      left: 0,
      display: "none",
    });
  });
});

.tooltip {
  padding: 8px;
  border: 1px solid black;
  background-color: rgb(200, 200, 200);
  position: absolute;
  z-index: 2;
  pointer-events: none;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="svgDiv">
  <svg width="200" height="100">
    <rect id="1" x="30" y="30" width="50" height="50" title="myText" style="fill:black"/>
    <rect id="2" x="130" y="30" width="50" height="50" style="fill:red"/>
    Sorry, your browser does not support inline SVG.
    </svg>
  <div id="tooltip" class="tooltip">tooltip text</div>
</div>

是否有工具提示库可以让我向SVG元素添加工具提示？

1 个答案: