jQuery Tooltip displaying extra div

Question

I am new to jQuery and have been trying out the ToolTip Widget.

When the tooltip is displayed, an extra div is also displayed under the content with the same text as the tooltip being displayed.

This is undesired and I'm not sure how to get rid of it.

Please see: jsFiddle link for Trying jQuery ToolTip for a code example of what I'm having problems with.

Here is the code that I posted on jsFiddle:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>tooltip demo</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<style type="text/css">
  .ui-tooltip
  {
        padding: 8px;
        position: absolute;
        z-index: 9999;
        max-width: 300px;
        -webkit-box-shadow: 0 0 5px #aaa;
        box-shadow: 0 0 5px #aaa;
        background: black;
        color: White;
  }
  body .ui-tooltip
  {
        border-width: 2px;
  }
</style>
</head>
<body>
  <p>
    <a href="#" title="Anchor description">Anchor text</a>
    <input title="Input help">
  </p>
  <script type="text/javascript">
    $(document).tooltip();
  </script>
</body>
</html>

score 3 · Accepted Answer · answered Jul 10 '14 at 20:13

3

If you change your jQuery to look like this it will work as you're hoping (without showing that div).

$(function() {
    $(document).tooltip();
    $(".ui-helper-hidden-accessible").hide();
});

Working fiddle -- http://jsfiddle.net/LJjDL/

answered Jul 10 '14 at 20:13

Rick Burns

1,538
16
20

score 2 · Answer 2 · answered Jul 10 '14 at 20:18

2

It looks like this is intended functionality, and it is resolved when you either:

Add the jquery-ui.css The jquery-ui.css file does styling for your elements and hides the log you are seeing. I updated the jsfiddle with the stylesheet I found here
Hide the element using css You can also hide the element using custom css: .ui-helper-hidden-accessible {display: none} here's an updated jsfiddle with this solution.

answered Jul 10 '14 at 20:18

Cole Lawrence

615
6
13

I was avoiding that css file because of the way that my main application is configured. Thank you for your help with pointing me in the direction of the .hidden-accessible class. – Frinavale Jul 10 '14 at 20:23

jQuery Tooltip displaying extra div

2 Answers2