Html 动态定位css工具提示

我有一个用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>

这在例外情况下非常有效：如果显示工具提示的范围在窗口底部的较低位置，则用户将看不到整个工具提示

有没有一种方法可以动态地定位此工具提示，使其内容在他悬停到跨度时始终保持不变

（我是html方面的新手，所以请记住这一点）

---

更新：是否可以始终在屏幕中间显示工具提示？这不是原始问题的解决方案，但对我来说是一个解决方案。

我担心CSS不允许您检测工具提示的位置，因此，您无法使用纯CSS进行动态对齐。但是，您可以做的是，如果您知道该元素接近底部，那么在

工具提示

旁边为该元素添加一个类，该类在该元素中的位置将有所不同。

我认为您可能需要在其中使用一些javascript/jquery。
看看这篇帖子：

---

这个问题与您的问题类似，但有一个下拉列表。

使用JavaScript/JQuery的工具提示

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>

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

$（“.tooltip”）.hide（）；//在scripts.js文件的第一行
$（“a”）.hover（函数（）{
var elems=这个；
var curClass=elems.className//单击当前类。
var windowHeight=$（window.height（）；
var windowWidth=$（window.width（）；
var left=元素偏移量left；
var top=元素偏移量；
var linkHeight=$（“+curClass）.height（）；
var linkWidth=$（“+curClass）.width（）；
var bottom=窗口高度-顶部-链接高度；
var right=窗口宽度-左侧-链接宽度；
变量topbottom=（顶部<底部）？底部：顶部；
var leftright=（左<右）？右：左；
var tooltiph=$（“#”+curClass）.height（）；
var tooltipw=$（“#”+curClass）.width（）；
如果（topbottom==bottom&&leftright==right）//完成
{
var yPos=顶部；
var xPos=左+链接宽度+10；
$（“#”+curClass）.css（“top”，yPos+“px”）；
$（“#”+curClass）.css（“左”，xPos+“px”）；
}如果（topbottom==bottom&&leftright==left）//完成，则为else
{
var yPos=顶部；
var xPos=右+链接宽度+10；
$（“#”+curClass）.css（“top”，yPos+“px”）；
$（“#”+curClass）.css（“右”，xPos+“px”）；
}如果（topbottom==top&&leftright==right）//完成，则为else
{
var xPos=左+链接宽度+10；
var yPos=top-tooltiph-（链接高度/2）；
$（“#”+curClass）.css（“top”，yPos+“px”）；
$（“#”+curClass）.css（“左”，xPos+“px”）；
}else if（topbottom==top&&leftright==left）{
var yPos=top-tooltiph-（链接高度/2）；
var xPos=left-tooltipw-linkWidth；
$（“#”+curClass）.css（“top”，yPos+“px”）；
$（“#”+curClass）.css（“左”，xPos+“px”）；
}else{}
$（“.tooltip”）.fadeIn（'fast'）；
},
函数（）{
$（“.tooltip”）.fadeOut（'fast'）；
});

不幸的是，这不是我的选择，因为我有一个很长的项目列表，每个项目都应该有自己的工具提示。项目的数量足够大，用户必须在其浏览器窗口中上下滚动，因此在某一点上屏幕底部的内容可以在另一点上屏幕顶部。现在绝对是JavaScript的时候了，抱歉！javascript/jquery可以吗？如果我得到一个脚本，那么它就是，然后我会尝试将它集成到我的页面中（没有完全理解它，但对我来说没关系）。

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*/
}

$(".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');
});