Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#8544 closed bug (fixed)

Unable to update tooltip content dynamically

Reported by: anvk Owned by: anvk
Priority: minor Milestone: git
Component: ui.tooltip Version: 1.9.0-rc.1
Keywords: Cc:
Blocked by: Blocking:

Description (last modified by Jörn Zaefferer)

Example of the issue could be found here:
https://github.com/anvk/tooltip.example


Browsers tried:
Firefox 15.0, Chrome Version 21.0.1180.82, Safari 6.0, Opera 12.01
OS: 10.7.4
JQuery UI: Tried both 1.9rc1 and 1.9m1


Steps to reproduce: Create an html page with one single button on it

  1. Create a tooltip for the button with a default text "before click!"
  2. Create a function which will update tooltip's text to say "after click!" using tooltip's content option. Attach this new function to the button's click event.

This could be achieved by adding code like this:

var createContentFunc = function (content) {
    return typeof content === "function" ? content : function () {
         return content;
    };
};

myButton.tooltip("option", "content", createContentFunc("after click!"));
  1. Hover mouse cursor over the button. Observe a tooltip saying "before click!"
  2. Click the button so that a dynamic tooltip text would trigger. Do not remove the mouse cursor from the button.

(Expected) tooltip's text is "after click!"
(Observed) tooltip's text is "before click!"

  1. Now remove the mouse from the button so that tooltip will disappear.
  2. Hove mouse cursor over the button again and observe a proper tooltip being set

(Expected) tooltip's text is "after click!"
(Observed) tooltip's text is "after click!"


This scenario could be found in the example link mentioned above.

Change History (6)

comment:1 Changed 8 years ago by Scott González

Owner: set to anvk
Status: newpending

This is by design. Changing the content option only applies when the content will be shown again. A single tooltip instance may be showing multiple tooltips at once, so what you're trying to do would require tracking which tooltips are being shown and adjusting their content.

You can invoke the content callback as many times as you want for an open tooltip and it will change the content. What is your actual use case?

comment:2 Changed 8 years ago by anvk

Status: pendingnew

The use case is the following:
We are working on a videoPlayer which has several control buttons each of them has a tooltip attached to it. One of the striking ones is a Play button which functions as a Play or a Pause button depending on the state of the videoPlayer. We want to change the button's tooltip dynamically to reflect videoPlayer's state and button's appearance. Users tend to keep mouse cursor over the Play button and stop or play the video when they want but the button would not update the tooltip text which is confusing.

comment:3 Changed 8 years ago by Scott González

I created a demo showing how to accomplish this with the current API: http://jsbin.com/uxoyan/1/edit

I think it makes sense to re-render content if the content option changes though. We'll need to track the open tooltips since delegated tooltips can have multiple tooltips open at once, but that shouldn't be too bad.

Another thing that this demo points out is that for one-off tooltips, providing a string instead of a function might be nice for the content option.

comment:4 Changed 8 years ago by Jörn Zaefferer

Description: modified (diff)

comment:5 Changed 8 years ago by Scott González

Resolution: fixed
Status: newclosed

Tooltip: Update open tooltips if the content option changes. Fixes #8544 - Unable to update tooltip content dynamically.

Changeset: dee7c8bd4493826e13b78b2d702947e6f4ad966e

comment:6 Changed 8 years ago by Scott González

Milestone: 1.9.0git
Note: See TracTickets for help on using tickets.