根據窗口大小的工具提示位置

Question

我創建了一個工具提示。 這是小提琴 。

CSS代碼

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

現在，如果我調整窗口的大小並懸停工具提示的內容，則由於窗口的大小已被縮小，因此工具提示的內容並不完全可見。 在小提琴中，如果您在小提琴中調整結果窗口的大小，則可以在第二行的最后一個元素中看到它。

我想以這樣的方式放置工具提示：即使更改了窗口大小，它也始終可見。

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

Answer 1

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中

Answer 2

嘗試這個...

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