CODEWITHSUNDEEP
javascriptjqueryjquery-uitooltipjquery-ui-tooltip
Andrew Nguyen
Andrew Nguyen

Reputation: 1436

jQuery UI tooltips not closing divs on mouseout

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.

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>

Upvotes: 0

Views: 1015

Answers (1)

Twisty
Twisty

Reputation: 30883

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.

Upvotes: 1

Related Questions