2

我从一个站点获得了一些 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>
4

1 回答 1

1

看到这个jsfiddler。我添加了这几行：

.htooltip span {
    position: relative;
    top: 6em;
    left: 5em;
    /* ... */
}
于 2012-05-29T17:06:04.680 回答