时间戳

首页 > 解决方案 > CSS/SCSS 位置：绝对工具提示 - 防止离开屏幕

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

问题描述

我有一个使用 position: absolute 和 pseudo 元素制作的工具提示。问题是当与工具提示关联的元素太靠近侧面时 - 工具提示部分会超出屏幕并且不可读。有没有办法可以计算/防止工具提示离开屏幕？

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

如果箭头不亮也没关系 - 我将来可能会删除它。

标签： csssass

解决方案

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

推荐阅读