#8544 closed bug (fixed)

Opened August 31, 2012 03:23PM UTC

Closed August 31, 2012 07:38PM UTC

Last modified August 31, 2012 07:38PM UTC

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

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!"));

3. Hover mouse cursor over the button. Observe a tooltip saying "before click!"

4. 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!"

5. Now remove the mouse from the button so that tooltip will disappear.

6. 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.

Attachments (0)

Change History (6)

Changed August 31, 2012 03:40PM UTC by scottgonzalez comment:1

owner:	→ anvk
status:	new → pending

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?

Changed August 31, 2012 03:58PM UTC by anvk comment:2

status:	pending → new

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.

Changed August 31, 2012 04:15PM UTC by scottgonzalez comment:3

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.

Changed August 31, 2012 04:18PM UTC by jzaefferer comment:4

description:	Example of the issue could be found here:[[BR]] \ https://github.com/anvk/tooltip.example[[BR]] \ \ ---- \ \ Browsers tried:[[BR]] \ Firefox 15.0, Chrome Version 21.0.1180.82, Safari 6.0, Opera 12.01[[BR]] \ OS: 10.7.4[[BR]] \ JQuery UI: Tried both 1.9rc1 and 1.9m1[[BR]] \ \ ---- \ \ 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!")); \ }}} \ \ 3. Hover mouse cursor over the button. Observe a tooltip saying "before click!" \ 4. 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!"[[BR]] \ (Observed) tooltip's text is "before click!" \ 5. Now remove the mouse from the button so that tooltip will disappear. \ 6. Hove mouse cursor over the button again and observe a proper tooltip being set \ (Expected) tooltip's text is "after click!"[[BR]] \ (Observed) tooltip's text is "after click!"[[BR]] \ \ ---- \ \ This scenario could be found in the example link mentioned above. → Example of the issue could be found here:[[BR]] \ https://github.com/anvk/tooltip.example \ \ ---- \ \ Browsers tried:[[BR]] \ Firefox 15.0, Chrome Version 21.0.1180.82, Safari 6.0, Opera 12.01[[BR]] \ OS: 10.7.4[[BR]] \ JQuery UI: Tried both 1.9rc1 and 1.9m1[[BR]] \ \ ---- \ \ 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!")); \ }}} \ \ 3. Hover mouse cursor over the button. Observe a tooltip saying "before click!" \ 4. 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!"[[BR]] \ (Observed) tooltip's text is "before click!" \ 5. Now remove the mouse from the button so that tooltip will disappear. \ 6. Hove mouse cursor over the button again and observe a proper tooltip being set \ (Expected) tooltip's text is "after click!"[[BR]] \ (Observed) tooltip's text is "after click!"[[BR]] \ \ ---- \ \ This scenario could be found in the example link mentioned above.

description:

Example of the issue could be found here:[[BR]] \ https://github.com/anvk/tooltip.example[[BR]] \ \ ---- \ \ Browsers tried:[[BR]] \ Firefox 15.0, Chrome Version 21.0.1180.82, Safari 6.0, Opera 12.01[[BR]] \ OS: 10.7.4[[BR]] \ JQuery UI: Tried both 1.9rc1 and 1.9m1[[BR]] \ \ ---- \ \ 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!")); \ }}} \ \ 3. Hover mouse cursor over the button. Observe a tooltip saying "before click!" \ 4. 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!"[[BR]] \ (Observed) tooltip's text is "before click!" \ 5. Now remove the mouse from the button so that tooltip will disappear. \ 6. Hove mouse cursor over the button again and observe a proper tooltip being set \ (Expected) tooltip's text is "after click!"[[BR]] \ (Observed) tooltip's text is "after click!"[[BR]] \ \ ---- \ \ This scenario could be found in the example link mentioned above. → Example of the issue could be found here:[[BR]] \ https://github.com/anvk/tooltip.example \ \ ---- \ \ Browsers tried:[[BR]] \ Firefox 15.0, Chrome Version 21.0.1180.82, Safari 6.0, Opera 12.01[[BR]] \ OS: 10.7.4[[BR]] \ JQuery UI: Tried both 1.9rc1 and 1.9m1[[BR]] \ \ ---- \ \ 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!")); \ }}} \ \ 3. Hover mouse cursor over the button. Observe a tooltip saying "before click!" \ 4. 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!"[[BR]] \ (Observed) tooltip's text is "before click!" \ 5. Now remove the mouse from the button so that tooltip will disappear. \ 6. Hove mouse cursor over the button again and observe a proper tooltip being set \ (Expected) tooltip's text is "after click!"[[BR]] \ (Observed) tooltip's text is "after click!"[[BR]] \ \ ---- \ \ This scenario could be found in the example link mentioned above.

Changed August 31, 2012 07:38PM UTC by Scott González comment:5

resolution:	→ fixed
status:	new → closed

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

Changeset: dee7c8bd4493826e13b78b2d702947e6f4ad966e

Changed August 31, 2012 07:38PM UTC by scottgonzalez comment:6

milestone:	1.9.0 → git

Search and Top Navigation