Questions tagged [jquery-ui-tooltip]

jQuery UI Tooltips are Customizable, themeable tooltips, replacing native tooltips. jQuery UI Tooltips can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip. But as it's not a native tooltip, it can be styled. Any themes built with ThemeRoller will also style tooltips accordingly.

jQuery UI Tooltip replaces native tooltips, making them themeable as well as allowing various customizations:

  • Display other content than just the title, like inline footnotes or extra content retrieved via Ajax.
  • Customize the positioning, e.g., to center the tooltip above elements. Add extra styling to customize the appearance, for warning or error fields.
  • Tooltips are also useful for form elements, to show some additional information in the context of each field.

See: API Documentation and Demo

285 questions
89
votes
15 answers

Jquery UI tooltip does not support html content

Today, I upgraded all of my jQuery plugs-in with jQuery 1.9.1. And I started to use jQueryUI tooltip with jquery.ui.1.10.2. Everything was good. But when I used HTML tags in the content (in the title attribute of the element I was applying the…
user1372430
32
votes
4 answers

Only close tooltip if mouse is not over target or tooltip

Using the jQuery UI tooltip, I would like to keep the tooltip open if I'm over the target, or if I'm over the tooltip itself. I'm thinking I can use the close callback to see if I'm over a tooltip or a target area, although I would have to then…
Francis Lewis
  • 8,872
  • 9
  • 55
  • 65
26
votes
2 answers

How to make jQueryUI tooltip apply only on focus

How can I make the new JqueryUI tooltip visible only on focus: At the moment its on focus and on hover. I believe this is since JqueryUI 1.9
Mark W
  • 5,824
  • 15
  • 59
  • 97
25
votes
1 answer

Violation Forced reflow while executing Javascript in console when tooltip appear on slider handle

I have a web page with some elements and Ant.design slider. My slider values are controlled via React states. When the slider tooltip is turn on, the slider is very slow to react and in the console I see: [Violation] Forced reflow while executing…
Evgeniy
  • 3,219
  • 5
  • 25
  • 40
24
votes
3 answers

jQuery UI TypeError: e.widget.extend is not a function

I have updated my jQuery files including jQUery UI to use the tooltip feature. But now Javascript is dieing with the following error: TypeError: e.widget.extend is not a function Can anyone help me?
Johnson_145
  • 1,994
  • 1
  • 17
  • 26
24
votes
8 answers

Maximum Width of jQuery UI Tooltip widget

I use jQuery UI's new Tooltip and having trouble with figuring out how to set a maximum width of the tooltip. I guess it should be done with position, but how?
sl3dg3
  • 5,026
  • 12
  • 50
  • 74
19
votes
6 answers

How do I Update the Content in Jquery UI Tooltip in Realtime?

I have an element that when hovered over, it displays the price of the item (in a game). I'm using the jQuery UI tooltip to power the display of the information about each item. When the item is clicked, jQuery captures the click, uses a $.get()…
Nicholas Cardot
  • 956
  • 1
  • 11
  • 30
15
votes
5 answers

jQuery UI keep tooltip open for debugging (to style it)

I'm trying to style the jQuery UI tooltip but it keeps closing. I've tried the following with no success: $("td label").tooltip({ disabled: true, close: function (event, ui) { return false; } }).on("click", function () { …
parliament
  • 21,544
  • 38
  • 148
  • 238
12
votes
3 answers

How to re-enable jQuery tooltip after disabled = true?

Trying to temporarily disable the jQuery tooltip $(document).tooltip( "option", "disabled", true ); When I try to re-enable them again, all of the title attributes are gone. I was trying to re-enable them using: $(document).tooltip( "option",…
codenamezero
  • 2,724
  • 29
  • 64
11
votes
8 answers

jquery tooltip add div role="log" in my page

I have a strange problem with jquery tooltip . I am using the code below