jQuery UI tooltips not closing divs on mouseout

Question

Problem

When I mouseover a jQuery tooltip, it keeps creating new child divs in an element called ui-helper-hidden-accessible which I've tried to close, but some of the divs are given a style of display: none and others actually appear at the bottom of the page.

• I'm currently using 1.12.1 of 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>

Answer 1

I found a few syntax errors in your code. After cleaning it up and testing it appears to work.

Example: 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
  });
});

You had not closed out the position properly. This means that close and hide was not being read.