CSS / SCSS位置：绝对的工具提示-防止脱离屏幕

Question

我有一个位置提示工具：绝对和伪元素。问题是，当与工具提示相关联的元素太靠近侧面时-工具提示部分脱离屏幕且不可读。有什么方法可以计算/防止工具提示出现在屏幕之外？

http://jsfiddle.net/o9s4dy0t/25/

这是CSS代码：

.tooltip {
    display: inline;
    position: relative;
}



.tooltip:after {
    background: #111;
    background: rgba(0,0,0,.8);
    border-radius: .5em;
    bottom: 1.35em;
    color: #fff;
    content: attr(title);
    display: table;
    padding: .3em 1em;
    position: absolute;
    text-shadow: 0 1px 0 #000;
    max-width:200px;
    right:60px;
    z-index: 98;
}

.tooltip:before {
    border: solid;
    border-color: #111 transparent;
    border-color: rgba(0,0,0,.8) transparent;
    border-width: .4em .4em 0 .4em;
    bottom: 1em;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    z-index: 99;
}

如果箭头关闭则很好-我将来可能会删除它。

Answer 1

这需要进行计算。我认为使用纯CSS是不可能的。但是，已经有各种库正在这样做。其中之一是： https://getbootstrap.com/docs/4.1/components/popovers/  您可以在代码中使用它并使它工作。