Home/ Questions/Q 8531667
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T09:32:23+00:00

I’m using a plugin called jQuery Validation Engine and I’m having real trouble finding

  • 0

I’m using a plugin called jQuery Validation Engine and I’m having real trouble finding any support for me problem.

The engine basically creates a tooltip on my form when a field is left blank. I have it all working correctly, I’m just trying to position it correctly.

JS fiddle showing form code and inline script, the full JS files and CSS are linked in the JSFiddle

The plugin can be found here.
The jQuery can be found here (via the site I’m using it on) and also here.
The CSS file can be found here.

The documentation points out that you can position using some preset values (top right, bottom right, top left etc). I’m using topRight.

Essentially I need to work out how to move the positioning slightly. The positioning is working correctly but due to the change on my graphic to have the arrow in the center it doesn’t look right.

I’m struggling to find out how the topRight property is set and how I can nudge it by a few pixels to get it to the position I require.

Can anyone who has a bit of a better eye see if they can point me in the right direction?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It looks like the tooltip div is controlled by this class in the css:

    (Located in : http://www.position-relative.net/creation/formValidator/css/validationEngine.jquery.css
    or your local equivalent.)

    .formError .formErrorContent {
    width: 100%;
    background: #ee0101;
    position:relative;
    color: #fff;
    width: 150px;
    font-size: 11px;
    border: 2px solid #ddd;
    box-shadow: 0 0 6px #000;
    -moz-box-shadow: 0 0 6px #000;
    -webkit-box-shadow: 0 0 6px #000;
    padding: 4px 10px 4px 10px;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

    Overriding the values in this css class with your own should let you do pretty much whatever you would like with the tooltip: color, positioning and the like. For example: Solving your problem with positioning could be done with adding margines in the override (ovveriding selector can be changed if it does not suit your needs):

     fieldset .formError .formErrorContent {
    margin-bottom: 10px;
}

    This would move the whole tooltip up by 10 pixels.

    I hope this is helpfull to your problem!

    • 0