asked on

Need help with qTip...

Hi,

I have the code below that shows a qTip when the mouse cursor is focused on the password field (with id="#LoginPassword"). Is there a way to show the tool tip ONLY when the field is blank??? In other words, I don't want to show it when the field has a value.

            $('#LoginPassword').qtip({
                  content: 'Password must contain a minimum of 8 characters, at least 1 lowercase character, at least 1 uppercase character, at least 1 number and at least 1 special character',
                  position: {
                        corner: {
                              target: 'topLeft',
                              tooltip: 'bottomLeft'
                        }
                  },
                  show: { when: { target: false, event: 'focus' } },
                  hide: { when: { target: false, event: 'blur' } },
                  style: {
                        padding: 5,
                        background: '#ffffcc',
                        color: '#000000',
                        textAlign: 'left',
                        border: {
                              width: 1,
                              radius: 1,
                              color: '#6699cc'
                        },
                        tip: { corner: 'bottomMiddle' }
                  }
            });

Many thanks in advance.

kadaba

http://craigsworks.com/projects/qtip/docs/api/#callbacks

try the beforeShow option.

$('#LoginPassword').qtip({
		  content: 'Password must contain a minimum of 8 characters, at least 1 lowercase character, at least 1 uppercase character, at least 1 number and at least 1 special character',
		  position: {
				corner: {
					  target: 'topLeft',
					  tooltip: 'bottomLeft'
				}
		  },
		  show: { when: { target: false, event: 'focus' } },
		  hide: { when: { target: false, event: 'blur' } },
		  style: {
				padding: 5,
				background: '#ffffcc',
				color: '#000000',
				textAlign: 'left',
				border: {
					  width: 1,
					  radius: 1,
					  color: '#6699cc'
				},
				tip: { corner: 'bottomMiddle' }
		  },
		  api{
			beforeShow: function(){
				if($(this).val() != ""){
					return false;
				}
			}
		  }
	});

Open in new window

ASKER CERTIFIED SOLUTION

kadaba

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Bobby X

ASKER

kadaba,
Your code works.

I have another question. Is there a way to create a shadow on the border of the tooltip with qTip?
I've tried -moz-box-shadow: 3px 3px 4px #000, -webkit-box-shadow: 3px 3px 4px #000, box-shadow: 3px 3px 4px #000, but it doesn't work.

Thanks again in advance.