Есть ли библиотека подсказок, которая позволяет мне добавлять подсказки к элементам SVG? - PullRequest
Новая
       37

Есть ли библиотека подсказок, которая позволяет мне добавлять подсказки к элементам SVG?

0 голосов
/ 03 мая 2018

Я хочу добавить динамический текст и стиль к подсказкам для элементов SVG. Я могу сделать это, добавив div и стилизуя его (красный прямоугольник ниже). Я бы предпочел позволить библиотеке обрабатывать это, но все они, кажется, используют атрибут title элементов, которые SVG не поддерживают (черный прямоугольник ниже).

Кто-нибудь может предложить такую ​​библиотеку? 

$(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();
  });
});
.tooltip {
  padding: 8px;
  border: 1px solid black;
  background-color: rgb(200, 200, 200);
  position: absolute;
  z-index: 2;
}
<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>

1 Ответ

0 голосов
/ 03 мая 2018

Я не уверен, нужна ли вам библиотека для простого случая. Я бы сделал твой фрагмент немного по-другому:

  • сделать div отображением: нет, указатель-события: нет элемента вашего DOM

  • при наведении курсора - обновить его положение и видимость

  • обработка динамических сообщений путем обновления параметра innerHTML всплывающей подсказки 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>
...