Предотвратить всплывающие подсказки

Question

Так что в настоящее время у меня есть страница с подсказками. Большинство из них небольшие фрагменты, но некоторые из них значительно длиннее. Есть также случаи, когда у меня есть всплывающая подсказка над span, содержащая несколько слов или слово, которое может быть пропущено. Моя проблема с моей текущей реализацией состоит в том, что всплывающая подсказка переполняется. То есть, когда выделенное слово находится очень близко к краю экрана, подсказка исчезает с экрана.

В приведенном ниже коде global_margin представляет поле слева и справа от всей страницы. Я хочу, чтобы выделенный текст (см. Структуру всплывающей подсказки ниже) был близок к краю экрана, убедитесь, что стрелка всегда отцентрирована на выделенном тексте, но переместите подсказку Content span так, чтобы его левый край находится в пределах поля страницы (в приведенной ниже настройке левый край всплывающей подсказки всегда будет по крайней мере на 50 пикселей слева, а правый край текстового поля подсказки всегда будет на расстоянии не менее 50 пикселей справа). Моя попытка использования фиксированной позиции, приведенная ниже, не работает.

Есть идеи о том, как я могу подойти к этому?

JavaScript:

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

CSS:

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

Каждая подсказка выглядит следующим образом:

<span class="tooltip">Highlighted text<span class="tooltipContent">Tooltip Text</span></span>