【问题标题】：jQuery UI tooltips not closing divs on mouseoutjQuery UI 工具提示不会在鼠标移出时关闭 div
【发布时间】：2017-05-10 01:07:56
【问题描述】：

问题

当我将鼠标悬停在 jQuery 工具提示上时，它会在一个名为 ui-helper-hidden-accessible 的元素中不断创建新的子 div，我试图将其关闭，但某些 div 的样式为 @987654322 @ 和其他人实际上出现在页面底部。

我目前使用的是 1.12.1 的 jQuery UI

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>

【问题讨论】：

你能添加一个 jsFiddle 来重现这个问题吗？

标签： javascript jquery jquery-ui tooltip jquery-ui-tooltip

【解决方案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 未被读取。

【讨论】：