div窗口應該在最上方

我需要在圖標頂部顯示工具提示窗口或div ...我沒有固定高度。如果文本超過四行它涵蓋了十字圖標... Here is demo div窗口應該在最上方

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>

來源

2012-11-23 Gaurav

不知道是你在找什麼，但誰知道：

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

      });

來源

2012-11-23 09:54:31

我們可以移動tip div窗口有點..當前div覆蓋了一半的圖標... – Gaurav

替換-tip.height（）通過-tip.outerHeight（）http://jsfiddle.net/Sbqtv/17/ –

再次感謝..我們可以添加邊緣頂級類...我需要給一些更多的頂邊... :) – Gaurav

在這裏你有你在找什麼： http://jsfiddle.net/Sbqtv/7/

我加入了position:relative酒店在您.tip_trigger，然後我在.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; 
}

但是，當底部圖像之一的頂端隱藏上面的圖像還有另外一個問題。

來源

2012-11-23 09:56:29 Alvaro

div窗口應該在最上方

回答

相關問題