基於窗口大小的工具提示定位

CSS代碼

a.tooltip:hover span{ 
display:inline; 
position:absolute; 
border:1px solid #DCA; 
background:#FF4747; 
font-weight: bold;}

現在，如果我調整窗口的大小和懸停工具提示的內容，工具提示內容不完全可見，因爲窗口已被調整到較小。在小提琴中，如果您調整小提琴中的結果窗口大小，您可以在第二行中查看最後一個元素。

我想定位工具提示，即使窗口大小發生變化，也始終可見。

我不熟悉窗口定位屬性。任何幫助表示讚賞。

來源

2014-05-20 Justin George

嘗試使用媒體查詢。 http://css-tricks.com/css-media-queries/ – nej

@shin。我不介意爲此而努力。但瀏覽器兼容性是一個問題，因爲我的項目主要關注IE。 –

DEMO

a.tooltip span { 
        z-index:2; 
        display:none; 
        padding:14px 20px; 
        width:inherit; 
        line-height:16px; 
        position: relative; 
    } 
    a.tooltip { 
     position: relative; 

    } 
a.tooltip:hover span{ 
     display:inline; 
     position:absolute; 
     border:1px solid #DCA; 
     background:#FF4747; 
     left: 0px; 
     bottom: 15px; 
     font-weight: bold; 
}

要調整較小的屏幕寬度，可以使用媒體查詢：

@media (max-width: 480px) { 
    a.tooltip:hover span{ 
      display:inline; 
      position:absolute; 
      border:1px solid #DCA; 
      background:#FF4747; 
      left: -30px; 
      bottom: 18px; 
      font-weight: bold; 
    } 

}

對於非常敏感的定位：

$(".tooltip").hover(function() { 
    var height = $(this).find('span').height(); 
    var top = $(this).offset().top; 
    if(height > top){ 
    $(this).find('span').css("top","10").css("bottom","inherit"); 
    } else if(height < top) { 
     $(this).find('span').css("bottom","10").css("top","inherit"); 
    } 
});

添加上面的代碼在你的JS

來源

2014-05-20 05:27:51 mohamedrias

這是一種方式。感謝那。但是，如果工具提示超出上述範圍，那麼這將是有益的，因爲它是最後一個元素。而不是製作滾動條。 –

使它底部：15px;而不是頂部：15px – mohamedrias

更新了我的答案 – mohamedrias

嘗試......

a.tooltip:hover span{ 
      display:inline; 
        position:absolute; 
         left:0px; 
         width:inherit; 
        border:1px solid #DCA; 
        background:#FF4747; 
        font-weight: bold; 
        }

來源

2014-05-20 05:33:44 next2u

基於窗口大小的工具提示定位

回答

相關問題