div窗口應該在頂部

Question

我需要在圖標的頂部顯示工具提示窗口或div ...我沒有固定高度。 如果文本超過四行它覆蓋十字圖標...... 這是演示

    /*--Tooltip Styles--*/
    .tip_trigger{display:block; padding:6px;}
    .tip {
        color: #333;
        background:#ffffff;
        border:1px solid #747474;
        display:none; /*--Hides by default--*/
        padding:10px;
        margin-left:-143px;
        margin-top:-50px;
        text-align:left; line-height:16px;
        position:absolute;  z-index:1000;
        cursor:auto;
        -moz-box-shadow: 2px 2px 5px #D3D3D3;-webkit-box-shadow: 2px 2px 5px #D3D3D3;box-shadow: 2px 2px 5px #D3D3D3;
    }   

 /*--jQuery --*/

     $(document).ready(function () {
            //Tooltips
            $(".tip_trigger").hover(function () {
                tip = $(this).find('.tip');
                tip.show(); //Show tooltip
            }, function () {
                tip.hide(); //Hide tooltip        
            })

        });

/*  HTML:- --------*/

    <td>
     <a class="tip_trigger">
      <img src="http://cdn-img.easyicon.cn/png/5249/524975.png" />
      <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
    </a>
    </td>

Answer 1

不確定它是你在找什么，但誰知道：

http://jsfiddle.net/Sbqtv/8/

$(document).ready(function () {
                //Tooltips
                $(".tip_trigger").hover(function () {
                    tip = $(this).find('.tip');
                    tip.show().css('margin-top',-tip.height()); //Show tooltip
                }, function () {
                    tip.hide(); //Hide tooltip          
                })

            });​

Answer 2

在這里你有你想要的東西： http ： //jsfiddle.net/Sbqtv/7/

我在.tip_trigger添加了position:relative屬性，然后在.tip類中添加了bottom和right屬性。 （考慮圖像的高度和寬度）

您必須處理相對位置（頂部，底部，左側，右側），因為您不知道哪個是尖端的高度。 不要使用邊距：

.tip_trigger{
    display:block;
    padding:6px; 
    position:relative;
}
.tip {
    color: #333;
    background:#ffffff;
    border:1px solid #747474;
    display:none; /*--Hides by default--*/
    padding:10px;
    text-align:left;
    line-height:16px;
    bottom:50px;
    right:0;
    position:absolute;    z-index:1000;
    cursor:auto;
    -moz-box-shadow: 2px 2px 5px #D3D3D3;
    -webkit-box-shadow: 2px 2px 5px #D3D3D3;
    box-shadow: 2px 2px 5px #D3D3D3;
}   

但是，當其中一個底部圖像的尖端隱藏頂部圖像時，會出現另一個問題。