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

除了例外情况之外，这种情况非常有效：如果显示工具提示的范围远远低于窗口底部，则用户将看不到整个工具提示。

有没有办法以某种方式动态定位此工具提示，使其内容始终在他徘徊到跨度时？

（我是html中的绝对新秀，所以请记住这一点）

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

Answer 1

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

Answer 2

我担心CSS不允许您检测工具提示的位置，因此，您无法使用纯CSS进行动态对齐。你可以做的是，如果你知道元素在底部附近，那么在tooltip旁边的另一个元素中添加一个类，它将<span>置于其中。

Answer 3

我想你可能需要在那里使用一些javascript / jquery 看看这篇文章：
Detect if dropdown navigation would go off screen and reposition it

问题类似于你的问题，但是有一个下拉列表。

动态定位css工具提示

3 个答案: