Question

Hello guys on my blog I use this script:

jQuery(document).ready(function () {
    jQuery(".postbox").hover(function () {
        tipinfo = $(this).find('.tipinfo');
        var t = jQuery(this).position() + jQuery(this).width();
        var leftto = t.left + jQuery(this).width() - 30;
        tipinfo.css({ 
            top: jQuery(this).position().top + jQuery(this).height() - 2, 
            left: leftto 
        });
        tipinfo.show(); //vedi tooltip
    }, function () {
        tipinfo.hide(); //nascondi tooltip
    })
});

The tooltip works perfectly with all browsers except IE. I know that the state Hover the browser from Microsoft is not working, so I ask for your help. There is a hack to remedy the problem?

I would be very grateful for your help

The CSS:

.tipinfo {
    border-radius: 3px 3px 3px 3px;
    color: #FFFFFF;
    display: none;
    position: absolute;
    width: 350px;
    z-index: 1000;
}

.bgbull {
    background: url(images/bgbulle.png) no-repeat scroll 0 0 transparent;
    height: 29px;
    line-height: 35px;
    padding-left: 50px;
    width: 308px;
}

.infob {
    background: none repeat scroll 0 0 #151515;
    border-bottom: 1px solid #151515;
    border-left: 1px solid #151515;
    border-right: 1px solid #151515;
    line-height:1.2em;
    padding: 5px
    ;width: 296px;
}

.bgbullbottom {
    background: url(images/bgbullebottom.png) no-repeat scroll 0 0 transparent;
    height: 29px;
    line-height: 35px;
    padding-left: 50px;
    width: 308px;
}

HTML Code:

<div class="tipinfo" style="display:none;">
<div class="bgbull"></div>
<div class="infob">
<h4 style="color:#494949;font-family:arial,sans-serif;font-size:12px;font-weight:bold;"><?php    the_title_attribute(); ?></h4>
<br>
<span style="color:#bbb;"><?php the_excerpt(); ?></span>
<br>
<div style="margin-top:2px;border-top:1px dotted #323232;"></div><br>
<div style="color:#bbb;">
<span class="info">Genere: </span><br />
<span class="info">Durata: </span><br />
<span class="info">Non sai se ti piace? </span>
</div>
<div class="clear"></div>
</div>
<div class="bgbullbottom"></div>
</div>

Answer 1

This like looks wrong to me:

var t = jQuery(this).position() + jQuery(this).width();

Because jQuery(this).position() returns object, but jQuery(this).width() returns integer. Probably you should change it to :

var t = jQuery(this).position();
t.left += jQuery(this).width();