动态定位 CSS 工具提示

Question

动态定位 CSS 工具提示

3

我有一个基于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 的绝对新手，请考虑回答我的问题。）

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

- Istvanb

JavaScript/jQuery可以吗？ - divy3993

如果我得到一个脚本，那么我会尝试将其集成到我的页面中（虽然没有完全理解，但对我来说没关系）。 - Istvanb

4个回答

1

很抱歉，CSS无法检测工具提示的位置，因此您无法使用纯CSS进行动态对齐。但是，如果您知道元素靠近底部，则可以在tooltip旁边为该元素添加一个类，以使<span>在其中定位不同。

- Wojciech Maj

很遗憾，这对我来说不是一个选项，因为我有一个长列表，每个项目都应该有自己的工具提示。项目数量足够大，用户必须在浏览器窗口中上下滚动，所以在某一时刻屏幕底部的内容可能会在另一秒钟出现在屏幕顶部。 - Istvanb

1

肯定是 JavaScript 的时候了，抱歉！ - Wojciech Maj

1

也许我有点晚（大约7年），但这是一个有趣的想法：

理论上，您现在可以通过在工具提示中使用“position: sticky; bottom:0;”来解决此问题。

- Gökhan Mete ERTÜRK

似乎没有回答问题。这只是将工具提示固定在视口的一个位置上；还存在着重绘的性能问题。这并不能确定渲染工具提示的方向。 - David Spector

position:sticky在视口中并不会将工具提示固定在一个位置上。可以尝试查看这个链接。只需确保工具提示的容器足够大即可。 - Gökhan Mete ERTÜRK

0

我认为你可能需要在那里使用一些javascript/jquery。
看看这篇文章：
检测下拉导航是否会超出屏幕并重新定位

问题与你的类似，但是涉及到下拉菜单。

- King Clauber

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- divy3993 · Accepted Answer

使用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>

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