1

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.

Sparky
  • 98,165
  • 25
  • 199
  • 285
Mark Gifford
  • 135
  • 1
  • 9
  • 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 Aug 14 '13 at 09:50
  • Also see: http://jsfiddle.net/kyK4G/ and http://stackoverflow.com/q/14741688/594235 for another method. – Sparky Aug 14 '13 at 15:40

1 Answers1

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"
        }); 
    }
Mark Gifford
  • 135
  • 1
  • 9