动态位置的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'); 
});