Showing qTip onmouseover

Question

I am trying to validate a form, using jQuery validate and show errors messages using qTip. But i want to show error message onMouse Over, as of now when i submit the form the error messages are coming next the text field.

How do i show the error message when i mouseover the textfield.

Demo - http://jsfiddle.net/UcaZT/

rvi.

Simen Echholt · Accepted Answer · 2011-03-16T11:34:02.880

4

The code showing the qtip tooltips looks like this:

// Apply the tooltip only if it isn't valid
$(element).filter(':not(.valid)').qtip({
    overwrite: false,
    content: error,
    position: position,
    show: {
        event: false,
        ready: true
    },
    hide: false,
    style: {
        classes: 'ui-tooltip-red' // Make it red... the classic error colour!
    }
});

This

show: {
    event: false,
    ready: true
},

tells qTip to open the tooltips immediately.

You want something like this:

    show: {
        event: 'mouseover'
    },
    hide: {
        event: 'mouseout'
    },

Here is an updated jsFiddle

edited Mar 16 '11 at 11:34

answered Mar 16 '11 at 11:27

Simen Echholt

11,243
2
34
26

@Simen After validating, i am trying to show # of error message in the form using following script. I am not sure whats wrong in the script. Can u look into.. http://jsfiddle.net/UcaZT/2/ – Ravi Mar 17 '11 at 09:00
1

You're initializing validate twice ( `$("#myForm").validate(...`). You need to provide all the options in the same initialization. Put the `invalidHandler` option inside the first call to `validate`. Here: http://jsfiddle.net/UcaZT/3/ – Simen Echholt Mar 17 '11 at 11:59
@Simen I have tested and working fine. I have one question related to qTip. I have a datagrid with lot of text inputs for which i am validating and showing error msgs using qTip. But the problem here is all the text inputs are dynamically generated having their own name for each text input. My doubt is how can i validate all dynamically generated text inputs using one single rule...? I tried but it is not working..[Demo](http://jsfiddle.net/UcaZT/9/) – Ravi Mar 18 '11 at 08:30

Showing qTip onmouseover

1 Answers1