css jquery中的工具提示位置问题

Question

我想在文字的上方显示工具提示。

如果你检查这个小提琴http://jsfiddle.net/EWwRs/，在鼠标移动时它会在链接下方并扰乱我的设计。

我希望它显示在上部，不应该打扰我现有的设计，但应显示为工具提示或标题。

这是一些代码

$(".currency").mouseover(function(){
//tooltip();
 $('#tooltip-' + this.id).show({
    effect: 'slide'
});
});

有关详细信息，请参阅上面的小提琴。

Answer 1

将position: absolute添加到.tooltip

然后使用保证金来定位div，在那里你想要它......

Answer 2

查看此演示http://jsfiddle.net/yeyene/EWwRs/4/

您还可以合并mouseover和mouseout脚本

JQUERY

var delay = 400;
$(".currency").mouseover(function(){
    $('#tooltip-' + this.id).show({
        effect: 'slide'
    });
}).mouseout(function(){
    setTimeout(function(){
        if (!$('#tooltip-' + this.id).hasClass('hovering')){
            $('#tooltip-' + this.id).hide();
        }
    }, delay)
});

$('.tooltip').mouseover(function(){
    $(this).addClass('hovering');
}).mouseout(function(){
    $(this).removeClass('hovering');
    setTimeout(function(){
        if (!$('.tooltip').hasClass('hovering')){
            $('.tooltip').hide();
        }
    }, delay)
});

CSS

.tooltip {
    display:none;
    position:absolute;
    margin-top:-210px;    
    margin-left:0;
    z-index:10;
    background:green url(/images/black_arrow.png);
    height:103px;
    padding:25px;
    width:196px;
    color:#fff;
    text-align:left;
    font:11px/11px Arial, Helvetica, sans-serif;
    border:3px solid red;
}