jQuery UI 鼠标移出时工具提示不关闭 div

Question

问题

当我将鼠标悬停在 jQuery 工具提示上时，它会不断在我试图关闭的名为 ui-helper-hidden-accessible 的元素中创建新的子 div，但是一些 div 被赋予了 display: none 的样式，而其他的实际上出现在页面底部。

• 我目前使用的是 jQuery UI
的 1.12.1

scripts.js

$(document).tooltip({
        tooltipClass: "popup",
        items: ".fa-question-circle",
        position: {
        my: "center bottom-15",
        at: "center top",
        collision: 'none',
        close: function(event, ui) {
            $(".ui-helper-hidden-accessible").remove();
        },
    },
    hide: false
});

index.html

<p class="score__title">Student-teacher ratio <i class="fa fa-question-circle tooltip" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam gravida molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Cras tempor nisi ac ligula molestie commodo. Sed varius magna at justo rutrum, et faucibus sapien cursus." aria-hidden="true"></i></p>

Answer 1

我在您的代码中发现了一些语法错误。清理并测试后，它似乎可以正常工作。

示例：https://jsfiddle.net/Twisty/17sj6Lj5/

HTML

<h1>
Widget
</h1>
<hr />
<div>
  <p class="score__title">Student-teacher ratio <i class="ui-icon ui-icon-help fa fa-question-circle tooltip" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam gravida molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Cras tempor nisi ac ligula molestie commodo. Sed varius magna at justo rutrum, et faucibus sapien cursus."
    aria-hidden="true"></i></p>
</div>

CSS

.fa-question-circle {
  background-color: #000;
  border-radius: 50%;
}

.ui-icon {
  background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_ffffff_256x240.png)
}

JavaScript

$(function() {
  $(document).tooltip({
    tooltipClass: "popup",
    items: ".fa-question-circle",
    position: {
      my: "center bottom-15",
      at: "center top",
      collision: "none"
    },
    close: function(event, ui) {
      $(".ui-helper-hidden-accessible").remove();
    },
    hide: false
  });
});

您没有正确关闭 position。这意味着 close 和 hide 没有被读取。