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 に答える