jquery - 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脚本，

查询

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;
}