How to programatically show jquery qtip tooltips as error notifiers

Question

I need to programatically show qtip tooltips as error notifiers in a form I am working on. The form submits via ajax, and returns an object with an action, and if there are error an array of field names with error text to be show.

if (response.action == 'error') {
  // We would put tooltip on appropriate items here
  for (var key in response.text){
    //alert( "Key: " + key + " Value: " + response.text[key] );
    jQuery(key).qtip({
      content: {
        text: response.text[key],
        prerender: true
      },
      style: {
        theme: 'red',
        tip : {corner : "bottomLeft", size : { x : 12, y : 12 }}
      },
      position : {
        corner : {
          target : "topRight", 
          tooltip : "bottomLeft"
        }
      },
      show : {
        ready : true, // show when created on orderError call
        when : false // never show unless explicitly called
      }

    });
  jQuery(key).qtip("show");
  }
}

Above is the relevant chuck of code - stepping through it, it all seems to be fine, but I can't get the tooltips to fire up and show on the page. Has anyone had success doing this or is there anything obvious I am doing wrong?

hi - key is the id of the field (aha! that might be it - it is missing the #) - response.text[key] is the error text. — Chris
– Chris, Commented Aug 27, 2010 at 15:25
okay so that was step one - getting the correct id. Now I need to just get the tips to show as soon as "show" is called - now they popup on mouseover. — Chris
– Chris, Commented Aug 27, 2010 at 15:30

codeulike · Accepted Answer · 2011-10-05 11:35:37Z

2

As you point out in the comments, one problem is that you need to make sure your key variable is a valid jQuery selector for the q-tip API call jQuery(key).qtip("show"); to work.

Your other problem (mouseover pop-ups) might be related to your show options:

show : {
    ready : true, // show when created on orderError call
    when : false // never show unless explicitly called
}

when: false will mean q-tip will wait for your .qtip("show"); call, so that should work OK.
But ready : true will make the q-tip show as soon as the DOM is ready, which then makes your API call to "show" redundant.

Try it with:

show : {
    when : false 
}

And see if thats any better.

You might also need:

hide: {
     when: false
}

... to prevent the tooltips from disappearing when you mouseout of the linked elements. (You might then also need some other way for the user to hide the tooltips)

edited Oct 5, 2011 at 11:35

answered Oct 5, 2011 at 11:28

codeulike

23.2k29 gold badges128 silver badges172 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to programatically show jquery qtip tooltips as error notifiers

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related