Обновление всплывающей подсказки jquery-ui во время скрытой анимации нарушает - PullRequest
Новая
       9

Обновление всплывающей подсказки jquery-ui во время скрытой анимации нарушает

0 голосов
/ 23 сентября 2019

Всякий раз, когда вы обновляете содержимое всплывающей подсказки jquery-ui во время работы скрытой анимации, она возвращается к видимости и переходит в некое прерывистое состояние, в котором она видна вечно и не реагирует на события.

Да, я знаю, я знаю, библиотека мертва.Тем не менее, есть ли способ обойти эту ошибку?Мне нужно обновить всплывающую подсказку с интервалом в 1 секунду, потому что в ней есть таймер, и я хотел бы как-то использовать анимацию затухания.

Демонстрация: просто перемещайте мышь внутрь и наружу первого блокапару раз: 

$("#animated").tooltip( {items: "div", content: ""} );
$("#not-animated").tooltip( {items: "div", hide: false, content: ""} );

setInterval( function() {
  $("#animated").tooltip("option", "content", Math.random().toFixed(3));
  $("#not-animated").tooltip("option", "content", Math.random().toFixed(3));
}, 500 );
.item {
  display: inline-block;
  background-color: DeepSkyBlue;
  padding: 12px;
}
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="item" id="animated">hiding animated</div>
<div class="item" id="not-animated">hiding not animated</div>
</body>
</html>

1 Ответ

0 голосов
/ 26 сентября 2019

Вы можете попробовать обновить элемент .ui-tooltip-content вручную. 

$(function() {
  function getRandom() {
    return Math.random().toFixed(3);
  }

  function updateContent() {
    $(".ui-tooltip-content", $("#animated").tooltip("widget")).html(getRandom());
    $("#not-animated").tooltip("option", "content", getRandom());
  }

  $("#animated").tooltip({
    items: "div",
    hide: 200,
    content: getRandom
  });
  $("#not-animated").tooltip({
    items: "div",
    hide: false,
    content: getRandom
  });

  var intv = setInterval(updateContent, 500);
});
.item {
  display: inline-block;
  background-color: DeepSkyBlue;
  padding: 12px;
}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="item" id="animated">hiding animated</div>
<div class="item" id="not-animated">hiding not animated</div>
...