Trouble getting started with qTip

[eventide]

I am using qTip to show a message for a dropdown (and eventually other elements when I get this working) when jQuery detects an item was not selected in the dropdown on form submission.

The qtip script file is uploaded and included in the head tag, as required.

Here's my jQuery code:

JS Code

if ($('select#docsList option:selected').val() == 0) {
	// No doc selected
	//$('#docsList').focus();
	$('#docsList').qtip({
		content: 'Please select a document.'
	});
	return false;
} else {
	selectedDocID = $('select option:selected').val();
}

The $('#docsList').focus(); is what I was using before and that does work, so I know my selector is correct.

Am I missing something to get the qtip tooltip to show?

---

UPDATE:

I just accidentally found out that the tooltip is showing, but only when the dropdown is moused-over. I need to have it appear right away when the error is detected and then I want to remove it when a selection is made.

How can I accomplish this?

Thanks for anyone's help!

[eventide]

Help?!

Anyone?!?!

[Craig]

Can you setup a test case at jsfiddle please? http://jsfiddle.net/MCRbs/

[eventide]

(22nd June 16:07)Craig Wrote:  Can you setup a test case at jsfiddle please? http://jsfiddle.net/MCRbs/

I will do that this evening. Thanks for replying, Craig.

[eventide]

I'm not sure how to create a sample matching my situation. As you can see in the code in my OP, I am trying to get the tooltip to show as a result a of validation error, not as a result of the user clicking something, or a mouseover. I need to open and close the tooltip programmatically. As far as I know there's no event involved in this situation.

[eventide]

Is there a function/method I can call to open/show and then close/hide the tooltip?

I saw in the "documentation" the show and hide options, but they both depend on an event.

[Craig]

You don't have to pass them events, just call them like so:

JS Code

$('.elementWithQTip').qtip('show');
$('.elementWithQTip').qtip('hide');

[eventide]

(23rd June 12:34)Craig Wrote:  You don't have to pass them events, just call them like so:

JS Code

$('.elementWithQTip').qtip('show');
$('.elementWithQTip').qtip('hide');

In replying to your last post I almost recreated the full functionality related to my issue, so I thought at that point it'd be easiest if I take the time to create a Fiddle: http://jsfiddle.net/n2YbB/6/. That is code taken directly from my project (and stripped out for clarity and relevant functionality).

Couple of things regarding how it is behaving:
1) as you'll see, the tooltip only shows when the dropdown is moused-over
2) using "show" and "hide" as you suggested had no effect
3) I originally had the qtip definition inside the validation function and experienced the same behavior

Hopefully, with that Fiddle we'll be able to get this ironed out quickly!

Thanks!

[Craig]

See here: http://jsfiddle.net/n2YbB/7/

[eventide]

(23rd June 18:40)Craig Wrote:  See here: http://jsfiddle.net/n2YbB/7/

Thanks, but as I only want to display the tooltip as the result of failed validation, I don't want it to show up until it is called in the validation function - not show up on load. Not knowing exactly what it will do, I thought I'd try changing prerender to false, but that had no effect that I could see.

How do I prevent it from showing on load and then make it show when the validation fails? (And subsequently hide it again when validation passes.)

[Craig]

Remove the AddClassesToDoc call at the bottom http://jsfiddle.net/n2YbB/11/