Question

我需要在图标的顶部显示工具提示窗口或div ...我没有固定高度。如果文字超过四行则覆盖十字图标...... Here is demo

enter image description here

    /*--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/

我在position:relative添加了.tip_trigger媒体资源，然后在bottom课程中添加了right和.tip媒体资源。（考虑图像高度和宽度）

你必须处理相对位置（顶部，底部，左侧，右侧），因为您不知道哪个是尖端的高度。不要使用边距：

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

但是当其中一个底部图像的尖端隐藏顶部图像时，会出现另一个问题。

div窗口应该在顶部

2 个答案: