Databases
StackOverflow2013
Postsdbo
POAbsolute position after data on same line
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAbsolute position after data on same line
    primarykey
    data
    text
    <p>I'm trying to add custom tool tips after input boxes and I have it working fine, except for when I submit the form and the errors show. For some reason, the tool tip blocks the error text. It's just odd and I've been wracking my brain too long now to figure it out.</p> <p><a href="http://www.marianoagency.com/certificate" rel="nofollow">Here</a> is the page in question.</p> <p>I only have the tool tips on the first four inputs. They work fine until you submit the form showing the errors. Click submit to see the odd behavior. </p> <p>Ultimately the goal would be to the tool tip appear over the error text and then disappear and show the error text when you tab back/click to another field.</p> <p>Any ideas?</p> <pre><code>function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } function prepareInputsForHints() { var inputs = document.getElementsByTagName("input"); for (var i = 0; i &lt; inputs.length; i++) { // test to see if the hint span exists first if (inputs[i].parentNode.getElementsByTagName("span")[0]) { // the span exists! on focus, show the hint inputs[i].onfocus = function() { this.parentNode.getElementsByTagName("span")[0].style.display = "inline"; } // when the cursor moves away from the field, hide the hint inputs[i].onblur = function() { this.parentNode.getElementsByTagName("span")[0].style.display = "none"; } } } // repeat the same tests as above for selects var selects = document.getElementsByTagName("select"); for (var k = 0; k &lt; selects.length; k++) { if (selects[k].parentNode.getElementsByTagName("span")[0]) { selects[k].onfocus = function() { this.parentNode.getElementsByTagName("span")[0].style.display = "inline"; } selects[k].onblur = function() { this.parentNode.getElementsByTagName("span")[0].style.display = "none"; } } } } addLoadEvent(prepareInputsForHints); </code></pre> <p>Here is the CSS for the <code>error</code> class and <code>hint</code> class:</p> <pre><code>.error { margin-left:5px; font-size:.75em; font-weight:bold; width:80px; color:#FF0000; } .hint { display:none; position:absolute; left:650px; width:200px; margin-top:-4px; border:1px solid #c93; padding:1.5px 10px 1.5px 10px; /* to fix IE6, I can't just declare a background-color, I must do a bg image, too! So I'm duplicating the pointer.gif image, and positioning it so that it doesn't show up within the box */ background:#ffc url(pointer.gif) no-repeat -10px 5px; font-weight: normal; } /* The pointer image is added by using another span */ .hint .hint-pointer { position:absolute; left:-10px; top:-1px; width:10px; height:19px; background: url(/_images/pointer.gif) left top no-repeat; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJohn
    1. USblue-eye
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POAbsolute position after data on same line
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POAbsolute position after data on same line
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COI would suggest including your javascript functions for showing and hiding tool tips and error messages with this question. My first thought however would be that you are targeting the first `<span>` tag you come across rather than selecting the tag by class name.
      singulars
      1. POAbsolute position after data on same line
      1. USMy Head Hurts
    2. COI am assuming your are using javascript or a javascript framework to make this happen. Would it be possible to see that javascript code? It looks like maybe something is crossed up, essential you should be able to have a div containing the error and another containing the tooltip. From there you should be able to have them set to display:none; by default and then show them on blur.
      singulars
      1. POAbsolute position after data on same line
      1. USKris Hollenbeck
    3. COAdded code but it shouldn't be that. It's the CSS that is affecting it's display, though I could be wrong.
      singulars
      1. POAbsolute position after data on same line
      1. USblue-eye
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload