开发者

toolTips not showing properly in Internet Explorer

开发者 https://www.devze.com 2023-02-21 02:23 出处:网络
My toolTips in Internet Explorer 6 and 7 seem to appear \"under\" the next tooltip. It may have something to do with the relative position style rule for the toolTip class but it\'s needed for positio

My toolTips in Internet Explorer 6 and 7 seem to appear "under" the next tooltip. It may have something to do with the relative position style rule for the toolTip class but it's needed for positioning of the toolTipWrapper. Below is my css and Jquery for the tooltip. I am using the span tag and assigning a class toolTip and adding a title attribute which contains the text of the tooltip.

CSS:

.toolTip {
    padding-right: 20px;
    background: url(../images/pageElements/help.gif) no-repeat right;
    color: #660099;
    cursor: help;
    position: relative;
}

.toolTipWrapper {
    position: absolute; 
    width: 201px; 
    top: 15px; 
    right: 0px; 
    font-size: 1em; 
    font-weight:bold; 
    color: #fff; 
    display: none; 
    z-index:999!important; 
}  

.tipTop {
    height: 30px;  
    width: 201px; 
    background: url(../images/pageElements/tipTop.png) no-repeat top;
}  

.tipMid {
    background: url(../images/pageElements/tipMiddle.png) repeat-y; padding: 0 25px 0 25px;
}  

.tipBtm {
    background: url(../images/pageElements/tipBottom.png) no-repeat bottom; height: 8px;
}  

JavaScript:

$(function () {
    var zmax = zmax + 1; //increase the z-index by 1
    $(".toolTip").hover(
        function () {
            this.tip = this.title;
            $(this).css('z-index', zmax); //create inline css zindex add 1 layer
            $(this).append(
                '' + '' + '' + this.tip + '' + '' + ''
            );
            this.title = "";
            this.width = $(this).width();
            $(this).find(".toolTipWrapper").css({
          开发者_运维百科      left: this.width - 22
            })
            $(".toolTipWrapper").fadeIn(300);
        },
        function () {
            $(".toolTipWrapper").fadeOut(100);
            $(this).children().remove();
            this.title = this.tip;
        }
    );
});

Sorry not all of the jQuery code appeared between the code brackets. I've tried adding in the jQuery option to increase the Z-index of a toolTip by 1 but that doesn't seem to work. It's not throwing errors or anything but nothing happens.


It's hard to know for sure without a live example so I can see the DOM structure, but in my experience I've found that problems with Z-index that are different between IE and other browsers are the result of differences in calculating "Stacking Context". (where "Stacking Context" is the thing you want to google and learn about).

0

精彩评论

暂无评论...
验证码 换一张
取 消