防止工具提示溢出

Question

因此，目前我有一个带有工具提示的页面。大多数是小碎片，但其中一些会更长。在某些情况下，我在match_all上有一个工具提示，其中包含多个单词或一个可以连词的单词。我当前实现的问题是工具提示溢出。也就是说，当突出显示的单词非常靠近屏幕边缘时，工具提示会从屏幕上消失。

在下面的代码中，span代表整个页面左右两侧的边距。我想发生的是，如果突出显示的文本（请参见下面的工具提示的结构）靠近屏幕边缘，请确保箭头始终始终位于突出显示的文本的中心，但要移动tooltipContent global_margin使其左侧边缘位于页面边距内（使用下面的设置，工具提示的左侧边缘将始终距离左侧至少50px，而工具提示文本框的右侧边缘将始终距离右侧至少50px ）。我在下面使用固定位置的尝试不起作用。

关于如何解决这个问题的任何想法？

JavaScript：

span

CSS：

var global_margin = 50;

$(document).ready(function() {
    $("#ContentWrapper").css("margin-left", global_margin + "px").css("margin-right", global_margin + "px");

    $(".tooltip").on("mouseover", function() {
        var l = $("> span", this).width / 2 + global_margin;
        var r = $(window).width() - l;

        if ($("> span", this).offset().left < $("> span", this).width + l)
        {
            $("> span", this).css({
                "position": "fixed",
                "top": $("> span", this).offset().top.toString() + "px",
                "left": l.toString() + "px"
            });
        }
        else if ($("> span", this).offset().left > r)
        {
            $("> span", this).css({
                "position": "fixed",
                "top": $("> span", this).offset().top.toString() + "px",
                "right": l.toString() + "px"
            });
        }
        else
        {
            $("> span", this).css("position", "absolute");
        }

        $("> span", this).css({
            "visibility": "visible", 
            "opacity": "0.875"
        });
    }).on("mouseout", function() {
        $("> span", this).css({
            "position": "absolute",
            "visibility": "hidden",
            "opacity": "0"
        }).removeAttr("left").removeAttr("top").removeAttr("right");
    });

    $("sup > span.tooltip > a").each(function(i, elem) {
        $(this).html("[" + (1 + i).toString() + "]");
    });

    $("i").each(function(i, elem) {
        $(this).addClass("yui_" + Math.floor(Math.random() * 10) + "_" + Math.floor(Math.random() * 100) + "_" + Math.floor(Math.random() * 10) + "_" + Math.floor(Math.random() * 10) + "_" + Math.floor(Math.random() * 1e16) + "_" + Math.floor(Math.random() * 1000));
    });

    $("p").each(function(i, elem) {
        $(this).addClass(randString_lower(20));
    });
});

每个工具提示如下：

.tooltip
{
    box-sizing: border-box;
    border-collapse: separate;
    letter-spacing: normal;
    line-break: auto;
    position: relative;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
}

.tooltip > a
{
    font-size: 66.666666666667%;
    text-decoration: none;
}

.tooltip > span
{
    display: run-in;
    bottom: 120%;
    left: calc(50% + 7.5px);
    min-width: 50px;
    opacity: 0;
    position: absolute;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: visibility 0.25s linear, opacity 0.25s linear;
    -moz-transition: visibility 0.25s linear, opacity 0.25s linear;
    -ms-transition: visibility 0.25s linear, opacity 0.25s linear;
    -o-transition: visibility 0.25s linear, opacity 0.25s linear;
    transition: visibility 0.25s linear, opacity 0.25s linear;
    visibility: hidden;
}

.tooltipContent
{
    background-color: #000000;
    border: 1px solid #000000;
    border-radius: 5px;
    color: #FFFFFF;
    display: inline-block;
    font-size: 16px;
    opacity: 1;
    padding: 5px;
    text-align: center;
    text-indent: 0px;
    white-space: nowrap;
}

.tooltip-par
{
    text-align: justify;
    text-indent: 25px;
    white-space: normal;
}

.tooltipContent::before
{
    left: 50%;
    transform: translateX(50%);
}

.tooltipContent::after
{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: #000000 transparent transparent transparent;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(calc(-50% - 7.5px));
    -moz-transform: translateX(calc(-50% - 7.5px));
    -ms-transform: translateX(calc(-50% - 7.5px));
    -o-transform: translateX(calc(-50% - 7.5px));
    transform: translateX(calc(-50% - 7.5px));
}