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)