How to programatically show jquery qtip tooltips as error notifiers
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({
开发者_C百科 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?
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)
精彩评论