Question

我需要帮助将jquery UI工具提示弹出对齐在元素的顶部。

这是我目前的代码 JSbin：http://jsbin.com/teqori/2/edit?html,css,js,console,output

JS：

$(function() {
    $(document).tooltip({
    items:'a[tip]',
    position: {
        my: "top",
        at: "right top",
    },
    content: function(){
        if($(this).is('[tip]')){
            var src = $(this).attr('tip');
            return '<img class = "toolTipPopUp" src ="'+src+'">'
        }
    }
    });
});

CSS

    img.productImg {
        border: 1px solid;
        padding-bottom: 10px;
        height:800px;   
    }

    img.toolTipPopUp{
        border: 1px solid;
        padding-bottom: 10px;
        height:600px;   
    }

HTML

<a tip = "http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/March_5_1895_San_Francisco_Call_newspaper.png/444px-March_5_1895_San_Francisco_Call_newspaper.png"><img class = "productImg"  src = "http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/March_5_1895_San_Francisco_Call_newspaper.png/444px-March_5_1895_San_Francisco_Call_newspaper.png"></a>

Answer 1

尝试将链接设置为内联块

a[tip] { display: inline-block; }

和

的位置

position: {
    my: "left top",
    at: "left top"
},

顶部对齐JQuery UI工具提示弹出窗口

1 个答案: