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?
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!