jquery show tips function fails to work in webkit based browsers

Question

I have a jquery function that shows/hides spans that look like "tips" when I click an input field on a form.

The function works great on FirfFox,Chrome,IE(!) :) , etc. But not at all on webkit based browsers aka Safari and Android (tested)

$(function(prepareInputsForHints) {
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++){
    (function(i) {
        // Let the code cleane
        var span = inputs[i].nextElementSibling;

    if(span instanceof HTMLSpanElement) {

if(span.className == "hint") {


        span.onmouseover = function() { this.isOver = true; }
        span.onmouseout = function() { this.isOver = false; if(!inputs[i].isFocus)  inputs[i].onblur(); }

        // the span exists!  on focus, show the hint
        inputs[i].onfocus = function () {
            this.isFocus = true;
            span.style.display = "inline";
        }
        // when the cursor moves away from the field, hide the hint
        inputs[i].onblur = function () {
            this.isFocus = false;
            if(!span.isOver) span.style.display = "none";
        }
}        
    }
    })(i);
}
});

Also, for your convenience i provide you with http://jsfiddle.net/eZnYY/1/

Answer 1

Try to replace you code line:

if(span instanceof HTMLSpanElement) {

with next:

if(span && span.tagName.toUpperCase()==="SPAN") {

http://jsfiddle.net/eZnYY/3/ Checked on desktop Safary and Android browser (emulator)

Answer 2

You should use the jQuery methods to ensure cross browser compatibility (your question has the jQuery Tag).

This is pure javascript. Convert your code to jQuery, use the jQuery events and set the css.

For example:

your code

var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++){ .. }

jQuery

$("input").each(function() { ... });

Answer 3

What I don't understand is, if you're using jquery, why are you not leveraging it in your function? I assure you that if you were to use jquery to attach the events, they will work in webkit and all other browsers.