Question

我从一个站点获得了一些CSS3代码，当悬停在一个锚元素（<a>）上时，它提供了一个很好的工具提示框。但是，工具提示始终显示在<a>的右上角。如果锚点位于屏幕顶部，则工具提示不在浏览器的上边缘，如果锚点位于屏幕的右边缘，则工具提示将显示在浏览器的右侧。在任何一种情况下，我都看不到大量的工具提示。有没有办法动态地让工具提示出现在屏幕的可见区域，这取决于锚点离屏幕边缘的距离？

这是CSS和示例锚点：

.tooltip {
    border-bottom: 1px dotted #0077AA;
    color: #0077AA;
    cursor: help;
}

.tooltip:hover {
    color: #0099CC;
}

.tooltip:after {
    -moz-transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px 8px 8px 0px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    color: #FFF;
    content: attr(data-tooltip);
    margin-top: -24px;
    opacity: 0;
    padding: 3px 7px;
    position: absolute;
    transition: all 0.4s ease-in-out;
    visibility: hidden;
}

.tooltip:hover:after {
    opacity: 1;
    visibility: visible;
}

.htooltip, .htooltip:visited, .tooltip:active {
    color: #0077AA;
    text-decoration: none;
}

.htooltip:hover {
    color: #0099CC;
}

.htooltip span {
    -moz-transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    -ms-transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    -o-transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    -webkit-transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 15px 15px 15px 0px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    color: #fff;
    margin-left: 2px;
    margin-top: -75px;
    opacity: 0;
    padding: 10px 10px 10px 40px;
    position: absolute;
    text-decoration: none;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    visibility: hidden;
    width: 350px;
    z-index: 10;
}

.htooltip:hover span {
    opacity: 1;
    position: absolute;
    visibility: visible;
}

HTML：

<a class="htooltip" href="#">WA &mdash; Washington
 <span>Washington State is the northwesternmost state in the contiguous 48.</span>
</a>

更新

这是对我的解决方案的第一次打击，以防它对某人有帮助：

    <script type="text/javascript" src="jquery-1.7.2.js"></script>

    <style type="text/css">
        .htooltip, .htooltip:visited, .tooltip:active
        {
            color: #0077AA;
            text-decoration: none;
        }

        .htooltip:hover
        {
            color: #0099CC;
        }

        .htooltip span
        {
            background-color: rgba(0,0,0, 0.8);
            border-radius: 15px 15px 15px 0px;
            box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
            color: #fff;
            opacity: 0;
            padding: 10px 10px 10px 40px;
            position: absolute;
            text-decoration: none;
            visibility: hidden;
            width: 350px;
            z-index: 10;

            -moz-transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
            -webkit-transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
            -o-transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
            -ms-transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
            transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
        }

        .htooltip:hover span
        {
            position: absolute;
            opacity: 1;
            visibility: visible;
        }
    </style>


<a onmouseover="SetTopLeft(this);" class="htooltip" href="#">WA &mdash; Washington<span>Washington State is the northwesternmost state in the contiguous 48.</span></a>


    <script type="text/javascript">
        function SetTopLeft(obj) {
            var mouseX = $(obj).offset().left;
            var mouseY = $(obj).offset().top - $(window).scrollTop();
            var screenWidth = $(window).width();
            var screenHeight = $(window).height();

            var top;
            var left;

            // If the tooltip would be too close to the top of the browser, show it below the element.
            if (screenHeight - mouseY > screenHeight - 50)
            {
                top = mouseY + 17;
            }
            else
            {
                top = mouseY - 60;
            }

            if (screenWidth - mouseX < 350 && mouseX < 350) // Close to the left and the right - center the span over the element.
            {
                left = mouseX / 2;
            }
            else if (screenWidth - mouseX < 350) // Close to the right - put span to the left.
            {
                left = mouseX - 350;
            }
            else
            {
                left = mouseX + 50; // Close to the left with extra space on the right - put span to the right.
            }

            $(obj).find("span").css("top", top);
            $(obj).find("span").css("left", left);
        }
    </script>

Answer 1

见jsfiddler。我添加了以下几行：

.htooltip span {
    position: relative;
    top: 6em;
    left: 5em;
    /* ... */
}

使用HTML5 / CSS3更改工具提示位置

1 个答案: