動態位置的CSS工具提示

Question

我在HTML + CSS開發的工具提示的解決方案：

HTML部分：

<a href="#" class="tooltip"> 
Tooltip 
<span> 
    <strong>Light-weight CSS Tooltip</strong><br /> 
    This is the easy-to-use Tooltip driven purely by CSS.<br/> 
    And this is some additional text 
    <br/><br/><br/> 
    More additional text 
</span> 

CSS：

a.tooltip {outline:none;} 
a.tooltip strong {line-height:30px;} 
a.tooltip:hover {text-decoration:none;} 
a.tooltip span { 
     z-index:10; 
     display:none; 
     padding:14px 20px; 
     margin-top:-50px; 
     margin-left:28px; 
     width:70%; 
     line-height:16px;} 

a.tooltip:hover span { 
     display:inline; 
     position:absolute; 
     color:#111; 
     border:1px solid #DCA; 
     background:#fffAF0;} 

a.tooltip span { 
     border-radius:4px; 
     box-shadow: 5px 5px 8px #CCC;} 

這工作得很好，例外：如果顯示工具提示的範圍遠遠低於窗口的底部，則用戶w ont看到整個工具提示。

是否有辦法以某種方式動態定位此工具提示，以便其內容始終處於跨越時間？

（我在HTML中的絕對菜鳥，所以請回答牢記這一點）

UPDATE：有可能在屏幕的中間始終顯示工具提示？這不會是對原始問題的解決方案，但對我來說是一個解決方案。

Answer 1

恐怕CSS不允許您檢測工具提示的位置，因此您無法使用純CSS進行動態對齊。你可以做的是，如果你知道元素靠近底部，那麼在tooltip旁邊的這個元素上增加一個類，它會在其中以不同的方式定位<span>。

Answer 2

我想你可能會需要使用一些JavaScript/jQuery那裏。
在這篇文章請看：
Detect if dropdown navigation would go off screen and reposition it

的問題是與你相似，但有一個下拉。

Answer 3

工具提示使用JavaScript/JQuery的

WORKING DEMO

HTML

<span id="tooltip1" class="tooltip"> 
    <strong>Light-weight CSS Tooltip</strong><br /> 
    This is the easy-to-use Tooltip driven purely by CSS.<br/> 
    And this is some additional text 
    <p> More additional text </p> 
</span> 


<a href="#" class="tooltip1" style="border: 1px solid red;"> 
Tooltip 
</a> 

CSS

body { 
    overflow:scroll margin:0px; 
} 
span { 
    z-index:10; 
    padding:14px 20px; 
    width:auto; 
    line-height:16px; 
    display:inline; 
    position:absolute; 
    top:50px; 
    color:#111; 
    border:1px solid #dca; 
    background:#fffAF0; 
    border-radius:4px; 
    box-shadow: 5px 5px 8px #CCC; 
    opacity:0.5; 
    overflow:auto; 
} 
a { 
    text-decoration:none; 
    position:absolute; 
    bottom:500px; 
    /* Change as per your wish it will still work*/ 
    left:800px; 
    /* Change as per your wish it will still work*/ 
} 

JavaScript/JQuery

$(".tooltip").hide(); // On very first line of scripts.js file 


$("a").hover(function() { 
    var elems = this; 
    var curClass = elems.className // current class clicked. 
    var windowHeight = $(window).height(); 
    var windowWidth = $(window).width(); 

    var left = elems.offsetLeft; 
    var top = elems.offsetTop; 
    var linkHeight = $("." + curClass).height(); 
    var linkWidth = $("." + curClass).width(); 
    var bottom = windowHeight - top - linkHeight; 
    var right = windowWidth - left - linkWidth; 
    var topbottom = (top < bottom) ? bottom : top; 
    var leftright = (left < right) ? right : left; 

    var tooltiph = $("#" + curClass).height(); 
    var tooltipw = $("#" + curClass).width(); 

    if (topbottom == bottom && leftright == right) //done 
    { 
     var yPos = top; 
     var xPos = left + linkWidth + 10; 
     $("#" + curClass).css("top", yPos + "px"); 
     $("#" + curClass).css("left", xPos + "px"); 
    } else if (topbottom == bottom && leftright == left) //done 
    { 
     var yPos = top; 
     var xPos = right + linkWidth + 10; 
     $("#" + curClass).css("top", yPos + "px"); 
     $("#" + curClass).css("right", xPos + "px"); 
    } else if (topbottom == top && leftright == right) //done 
    { 
     var xPos = left + linkWidth + 10; 
     var yPos = top - tooltiph - (linkHeight/2); 
     $("#" + curClass).css("top", yPos + "px"); 
     $("#" + curClass).css("left", xPos + "px"); 
    } else if (topbottom == top && leftright == left) { 
     var yPos = top - tooltiph - (linkHeight/2); 
     var xPos = left - tooltipw - linkWidth; 
     $("#" + curClass).css("top", yPos + "px"); 
     $("#" + curClass).css("left", xPos + "px"); 
    } else {} 

    $(".tooltip").fadeIn('fast'); 
}, 

function() { 
    $(".tooltip").fadeOut('fast'); 
});