jQuery UI Tooltip with jQuery Validate plugin

Question

I'm trying to use jQuery Tooltip to display a different colour tooltip for errors. I can do this fine with static content using the tooltipClass and styling that class appropriately.

$(".error").tooltip(
{   
   tooltipClass: "ttError"
});

Any class which already already has the error class attribute will work correctly but when I use the validate plugin to dynamically add the error class the tooltip will not display correctly. I've only just started using jQuery more so this is out of my scope at the moment, any pointers appreciated.

You need to apply the .tooltip()-method after the validation has added the error class. I assume the validation-plugin comes with a callback were you add the error-class, just throw in the code you posted above there aswell. — ninja
– ninja, Commented Aug 14, 2013 at 9:50
Also see: jsfiddle.net/kyK4G and stackoverflow.com/q/14741688/594235 for another method. — Sparky
– Sparky, Commented Aug 14, 2013 at 15:40

Mark Gifford · Accepted Answer · 2013-08-14 10:10:56Z

2

As ninja said in the comment I just placed the above code in the errorPlacement function for the validate plugin:-

errorPlacement: function(error, element) 
    {
        element.attr('title', error.text());
        $(".error").tooltip(
        {   
            position: 
            {
                my: "left+5 center",
                at: "right center"
            },
            tooltipClass: "ttError"
        }); 
    }

answered Aug 14, 2013 at 10:10

Mark Gifford

1351 silver badge9 bronze badges

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

Collectives™ on Stack Overflow

jQuery UI Tooltip with jQuery Validate plugin

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related