(jquery) toggle() on an <span> with "position: absolute; display: inline;" -
i have form input boxes horizontally across page. i'm trying utilize inline span "position: absolute" validation error floats above other form elements. below demo, i've reversed visibility validation message hides on hover , appears on non-hover.
on initial page load, validation error appears on top of other form elements correctly, well. 1 time hover, causing jquery toggle, text hides, should, still well. when mouse off, causing jquery toggle, in chrome validation text wraps downwards next line. in firefox, validation text randomly appears in right , wrong spot mouse on , mouse off. it's crazy!
no, don't want utilize toggleclass, because doesn't animate. no, don't want utilize tooltip, need utilize custom span. want toggle() set element started.
<html> <head> <script type="text/javascript" src="jquery-2.1.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $( 'span.validationicon' ).hover(function(){ $(this).next().toggle('fast').css("display", "inline");}); }); </script> </head> <body> <form> <span> <label>contact number</label> <input type="tel"/> <span class="validationicon">!!!</span> <span style="position: absolute; display: inline;">validation error goes in here</span> </span> <span> <label>contact name</label> <input type="text"/> <span class="validationicon">!!!</span> <span style="position: absolute; display: inline;">other validation error goes in here</span> </span> </form> </body> </html> jquery
No comments:
Post a Comment