Search code examples
javascriptjquerytooltip

Tooltip only working on one text field

I have the below code which I got from another website. The problem I am having is it is only displaying onclick of the first text field. All other textfields it does not work.

I have not bothered posting the CSS as not needed to fix I believe.

Basically to display a text field I have to place the below code right underneath each textfield

<span class="hint">This is a hint">&nbsp;</span></span>

Here is the JavaScript:

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<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<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);

I like the tooltip as it's exactly what I wanted as it shows a < (sideways triangle) so it points to the textbox that is selected.

I was thinking of maybe using jQuery but as I don't have knowledge of JS/jQuery not sure how I would make it so it uses the CSS I currently have for the tooltip.

Solution

  • Depends on your HTML markup. Each span/input pair must be in its own container.

    Example: http://jsfiddle.net/E7ZME/

    <div><input><span class="hint">This is a hint"&nbsp;</span></div>
<div><input><span class="hint">This is a hint"&nbsp;</span></div>
<div><input><span class="hint">This is a hint"&nbsp;</span></div>

    I didn't change any of the javascript you posted. I only used this HTML, and a little CSS.

    EDIT:

    If you're going to use jQuery, check out some of the tooltip plugins.

    Here's a list of 30 of them: