Question

我创建了一个工具提示。这是fiddle。

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

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

2 个答案: