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
Hello,

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.on('change',
        function(){
            select.qtip("api").set('content.ajax.data', {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 content.data option via the API interface, but I still got the original tooltip.

How can I make this work using JQuery Deferred Objects?

Thanks,

Robert
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:

http://qtip2.com/guides#content

JS Code
select.qtip({
       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

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


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  [Solved] How to change the arrow (tip) color ? elody 3 9,725 6th March 13:00
Last Post: marcos.furquim
  [Solved] Two tooltips on the same element yuco91 6 3,994 13th February 23:23
Last Post: MikrotikPa
  Can I change width of input field? CodeBuilder 0 657 19th October 13:48
Last Post: CodeBuilder
  qtip2 is not working on dynamically added element aniket27 0 1,043 2nd July 12:27
Last Post: aniket27
  Can't change tip color, read several support threads, no luck! Hendeca 0 1,015 12th April 06:13
Last Post: Hendeca
  Change Tooltip text on click halesenchanted 0 938 7th April 18:07
Last Post: halesenchanted
  How do I change *just* the tip color? (not entire background color) c00lm4n 0 945 10th September 14:59
Last Post: c00lm4n
  Possible to manipulate element instead of creating new? mortigamer 0 1,171 2nd July 09:20
Last Post: mortigamer
  Delay between owner element movement and qTip2 movement. shoor 0 1,730 16th May 16:20
Last Post: shoor
  Update attached qTip2 popup when owner element moves. shoor 0 1,058 16th May 16:12
Last Post: shoor



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