如何阻止我的div像这样逃离浏览器窗口？

Question

我在react.js中绘制了一个绘制的图表，并且有一个工具提示div，它是根据绘图点x / y坐标的绝对位置创建的。当弹出文本太长时，它仅在左侧与浏览器发生碰撞，无论出于何种原因，它在右侧正确包裹，如照片中所示。如何在两侧进行包装行为？

.tooltip {
    position: absolute;
    text-align: center;
    padding: 2px;
    font: 12px sans-serif;
    background: white;
    opacity: 0.8;
    border: 0px;
    border-radius: 3px;
    pointer-events: none;
    min-width: 60px;
}

Answer 1

我没有代码，因此我无法对其进行编码，但我假设您会在某些特定的屏幕宽度上执行@media查询并更改.tooltip css属性 - 例如宽度。

希望它有所帮助！