Styly vlastního ToolTipu fungují ve FF, ale ne v Chromu – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Ahoj všem,

jsem jen velmi mírně pokročilým JavaScriptérem, takže si nejsem jist, v čem je chyba, a předem se omlouvám všem, kterým je to jasné jako facka, za potenciálně pitomý dotaz.

Na stránkách zaachiho jsem našel pěkný skriptík na tvorbu vlastního tooltipu. Použil jsem ho na svých na Wordpressovských stránkách a bezvadně funguje - ale jen ve FireFoxu. Z nějakého důvodu mi to Chrome nedělá správně. Tooltip se sice objevuje a mizí, jak má, ale je transparentní (namísto poloviční opacity), o chybějících stylech nadefinovaných v CSS ani nemluvě.

Prosím, poraďte, kde chybuji. Níže uvádím použitý skript i CSS:

//div ID
var myDivId = 'ZHintDiv';
//posun v ose X
var movingX = 20; //px
//posun v ose Y
var movingY = 10; //px


//vychozi pozice
var positionX = 0;
var positionY = 0;

//vytvorime novy element typu DIV
var divElement;
divElement = document.createElement('div');
//nastavime ID 
divElement.setAttribute('id', myDivId);
//visibility:hidden
divElement.style.visibility = 'hidden';
//positin: absolute
divElement.style.position = 'absolute';
//vychozi pozice
divElement.style.left = '0px';
divElement.style.top = '0px';

//zjisteni souradnic mysi
function getMouseXY(e) {
    var browserIE = document.all?true:false
    if (!browserIE) document.captureEvents(Event.MOUSEMOVE)
    //zjisteni souradnic
    positionX = browserIE?event.clientX + document.body.scrollLeft:e.pageX;
    positionY = browserIE?event.clientY + document.body.scrollTop:e.pageY;
    //posun elementu 
    setPosition();
    return true;
}

//nastaveni pozice okna
function setPosition(){
    var windowWidth = 0;
    //zjisteni sirky okna
    if( typeof( window.innerWidth ) == 'number' ) {
        windowWidth = window.innerWidth;
    } else if( document.documentElement && document.documentElement.clientWidth ) {
        windowWidth = document.documentElement.clientWidth;
    } else if( document.body && document.body.clientWidth  ) {
        windowWidth = document.body.clientWidth;
    }
    //pokud je pozice za okrajem okna, nastavi se pred kurzor
    if( ( positionX +  parseInt(divElement.style.width ) + movingX + 50 ) > windowWidth ){
        positionX -= ( movingX + parseInt(divElement.style.width ) );
    }
    divElement.style.left =  ( movingX + positionX ) + 'px';
    divElement.style.top = ( movingY + positionY ) + 'px';
}


//funkce pro nastavei opacity
function setOpacity( element, alpha ){
    var el = document.getElementById(element);
    
    if( el.style.opacity != undefined ){
        el.style.opacity = alpha;
    }
    else if( el.style.MozOpacity != undefined ){ 
        el.style.MozOpacity = alpha;
    }
    else if( el.style.filter != undefined ){
        el.style.filter = "alpha(opacity=0)";
        el.filters.alpha.opacity = ( alpha * 100 );
    }
    
    return true;
}

function pulseOn(){
    for( i = 0; i <= 9; i++ ){
        setTimeout("setOpacity('" + myDivId + "'," + i/10 + ");", 25*i);
    }   
}

//TOOLTIP FUNCTION
function tooltip( str, el, width ){
    //pokud neni vytvoreny div pridany v HTML
    if( !document.getElementById(myDivId) )
        //pridame div do stranky
        document.body.appendChild(divElement);
    //nastavime pozadovanou sirku pro div
    divElement.style.width = width + 'px';
    //nastavime visibility:visible
    setOpacity(myDivId, 0 );
    divElement.style.visibility = 'visible';
    pulseOn();
    //vlozime do divu nas text
    divElement.innerHTML = str;
    //pri posunu po elementu menime pozici divu
    el.onmousemove=getMouseXY;
    //pri opusteni elementu okno schovame
    el.onmouseout = hidetip;
}

//schovani okna
function hidetip(){
    divElement.style.visibility = 'hidden';
}

Stylopis:

#ZHintDiv{
    float:left;
    border: 1px solid silver; 
    border-right: 3px solid black;
    border-bottom: 3px solid black;
    background-color: white; 
    padding: 4px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 11px;
    font-weight: normal;
}