Please Log-in or Register to get full access to the forums.

Post Reply 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
How to change tooltip associated with <select> element
11th February, 20:01
Post: #1
How to change tooltip associated with <select> element

I am upgrading some legacy code to use the latest version of qTip2.

I have replaced calls to the AJAX plugin with jQuery deferred objects and everything seems to work as expected.

However, one of the tooltips refers to a <select> element and needs to change whenever a new option is selected.

The original code solved this problem as follows:

JS Code
// update tooltip content with new ID when select value changes,
// otherwise you get stuck with the initial value
            select.qtip("api").set('', {id: $(this).val()} );

However, this depends on being able to access the data property of the AJAX plugin.

Using a JavaScript debugger, I discovered that I could set the option via the API interface, but I still got the original tooltip.

How can I make this work using JQuery Deferred Objects?


Find all posts by this user
Quote this message in a reply
13th February, 10:15
Post: #2
RE: How to change tooltip associated with <select> element
I've found a solution to my problem - the trick is to delay accessing the <select> value until the tooltip is required. This means that there is no need to update the id field after the tooltip has been created - each time the tooltip is requested, the current value of the <select> option is passed to the Ajax call.

The code looks like this - it basically follows the "Grab content continuously" pattern described in the Content guide:

JS Code
       content: {
            text: function(event, api) {
                // Re-fetch the tooltip content each time
                return $.ajax({
                    url: tooltip,
                    data: {
                        id: select.val()     // use the current select option
                .then(function(content) {
                    return content
                }, function(xhr, status, error) {
                    api.set('content.text', status + ': ' + error);

I hope this is helpful to someone else with the same problem - it is actually easier to solve this problem using the new API than it was using the old API!

Best wishes

Find all posts by this user
Quote this message in a reply
Post Reply 

Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  An element from different web page Thegodoflife462 0 118 8th June 16:41
Last Post: Thegodoflife462
  [Solved] How to change the arrow (tip) color ? elody 3 10,263 6th March 13:00
Last Post: marcos.furquim
  [Solved] Two tooltips on the same element yuco91 6 4,688 13th February 23:23
Last Post: MikrotikPa
  Can I change width of input field? CodeBuilder 0 827 19th October 13:48
Last Post: CodeBuilder
  qtip2 is not working on dynamically added element aniket27 0 1,329 2nd July 12:27
Last Post: aniket27
  Can't change tip color, read several support threads, no luck! Hendeca 0 1,229 12th April 06:13
Last Post: Hendeca
  Change Tooltip text on click halesenchanted 0 1,158 7th April 18:07
Last Post: halesenchanted
  How do I change *just* the tip color? (not entire background color) c00lm4n 0 1,083 10th September 14:59
Last Post: c00lm4n
  Possible to manipulate element instead of creating new? mortigamer 0 1,326 2nd July 09:20
Last Post: mortigamer
  Delay between owner element movement and qTip2 movement. shoor 0 1,943 16th May 16:20
Last Post: shoor

User(s) browsing this thread: 1 Guest(s)