自定义工具提示溢出视口

Question

我正在构建一个样式指南，目前，我正在研究元素的工具提示。

我正在使用SCSS并尝试不使用除CSS或纯JavaScript以外的任何东西，我不想使用任何框架或库，因为必须将依赖关系保持在最低限度。

以下是当前问题的屏幕截图：

正如您在左下角所看到的，工具提示溢出页面。

我需要找到一种方法来确保整个工具提示始终保持在视口中。

这是我目前的SCSS和HTML：

＆＃13;

＆＃13;

[data-toggle="tooltip"] {
    position   : relative;
    display    : inline-block;
    margin-left: 50%;
    transform  : translateX(-50%);
    &:hover {
        &::after,
        &::before {
            display: block;
        }
    }
    &::after,
    &::before {
        position: absolute;
        display : none;
    }
    &.tooltip-right {
        &::after {
            content      : "";
            left         : calc(100% + 5px);
            top          : 50%;
            transform    : translateY(-50%);
            background   : $tooltipBg;
            opacity      : 0.8;
            color        : white;
            padding      : 10px;
            border-radius: 5px;
        }
        &::before {
            width        : 0;
            height       : 0;
            border-right : 5px solid transparentize($tooltipBg, 0.2);
            border-bottom: 5px solid transparent;
            border-top   : 5px solid transparent;
            top          : 0;
            left         : 100%;
            content      : "";
            top          : 50%;
            transform    : translateY(-50%);
        }
    }
    &.tooltip-left {
        &::after {
            content      : "dhfgdahfgekfdshkfgdskhgfdhkbfjhsdgfjhdsgf";
            left         : 0;
            top          : 50%;
            transform    : translate(calc((-100%) - 5px), -50%);
            background   : $tooltipBg;
            opacity      : 0.8;
            color        : white;
            padding      : 10px;
            border-radius: 5px;
        }
        &::before {
            width        : 0;
            height       : 0;
            border-left  : 5px solid transparentize($tooltipBg, 0.2);
            border-bottom: 5px solid transparent;
            border-top   : 5px solid transparent;
            top          : 0;
            left         : -5px;
            content      : "";
            top          : 50%;
            transform    : translateY(-50%);
        }
    }
    &.tooltip-bottom {
        &::after {
            content      : "";
            left         : 50%;
            transform    : translate(-50%, 5px);
            background   : $tooltipBg;
            opacity      : 0.8;
            color        : white;
            padding      : 10px;
            border-radius: 5px;
        }
        &::before {
            width        : 0;
            height       : 0;
            border-left  : 5px solid transparent;
            border-bottom: 5px solid transparentize($tooltipBg, 0.2);
            border-right : 5px solid transparent;
            left         : 50%;
            bottom       : 0;
            content      : "";
            transform    : translate(-50%, 5px);
        }
    }
    &.tooltip-top {
        &::after {
            content      : "";
            left         : 50%;
            top          : 0;
            transform    : translate(-50%, -25px);
            background   : #4C4C4C;
            opacity      : 0.8;
            color        : white;
            padding      : 10px;
            border-radius: 5px;
        }
        &::before {
            width       : 0;
            height      : 0;
            border-left : 5px solid transparent;
            border-top  : 5px solid transparentize($tooltipBg, 0.2);
            border-right: 5px solid transparent;
            left        : 50%;
            content     : "";
            transform   : translate(-50%, -5px);
        }
    }
}

＆＃13;

<section>
                    <div class="col-sm-12 col-md-12 col-lg-12">
                        <h1 class="title">Tooltips</h1>
                        <hr>
                    </div>
                    <div class="col-sm-12 col-md-3 col-lg-3">
                        <div class="tooltip-container tooltip-left" data-toggle="tooltip" data-tooltip-direction="left" data-tooltip-text="I'm a tooltip yo!">
                            <img src="http://placekitten.com/100/100" alt="meow" class="circle center">
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-3 col-lg-3">
                        <div class="tooltip-container tooltip-right" data-toggle="tooltip" data-tooltip-direction="left" data-tooltip-text="I'm a tooltip yo!">
                            <img src="http://placekitten.com/100/100" alt="meow" class="circle center">
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-3 col-lg-3">
                        <div class="tooltip-container tooltip-top" data-toggle="tooltip" data-tooltip-direction="left" data-tooltip-text="I'm a tooltip yo!">
                            <img src="http://placekitten.com/100/100" alt="meow" class="circle center">
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-3 col-lg-3">
                        <div class="tooltip-container tooltip-bottom" data-toggle="tooltip" data-tooltip-direction="left" data-tooltip-text="I'm a tooltip yo!">
                            <img src="http://placekitten.com/100/100" alt="meow" class="circle center">
                        </div>
                    </div>
                </section>

＆＃13;

＆＃13;

＆＃13;

如上所述，解决方案不能是框架或库。我尝试了不同的定位（块等），宽度，但似乎没有任何帮助。

有什么想法吗？