Question

我在使用绝对定位的右侧工具提示在打开时被裁剪并且工具提示靠近视口的右侧时遇到了困难。

如果视口很小，工具提示将延伸到视口之外。我正在寻找工具提示延伸到屏幕边缘（流畅）。

是否有CSS解决方案？

来自Predix或其他设计系统的工具提示将具有智能工具提示，只是将工具提示移动到图标下方/上方，但我希望保持相同的用户期望工具提示将显示在右侧。

＆＃13;

body {
  background-color: #999;
}
button {
  background-color:transparent;
  bordeR:none;
}

.container {
  width:100%;
  padding-top:50px;
  padding-left:280px;
}

.tooltip-container {
  position: relative;
}

.tooltip-text {
    display:block;
    border: 1px solid #ccc;
    max-width: 850px;
/*  Hiding the min-width will cause the tooltip to word-break at every word   */
    min-width: 300px;
    padding: 20px;
    position: absolute;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 6px 12px 0 rgba(0,0,0,.5);
    top: -36px;
    left: 160%;
    
}
.tooltip-text:before {
     width: 1rem;
    height: 1rem;
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
    background-color: inherit;
    left: 1.5rem;
    bottom: -.5rem;
    margin-left: -.5rem;
    top: 32px;
    left: 0;
}

＆＃13;

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet"/>
<div class="container">
  <span class="tooltip-container">
    <button class="tooltip-button">
      <i class="fas fa-lg fa-info-circle"></i>
    </button>
    <div class="tooltip-text">
      This is a Long tooltip that I want to be fluid and extend to the edge of the screen but not get cropped when the screen shrinks. Currently sitting at a width of 300px.
    </div>
  </span>

＆＃13;

其他解决方案：

智能工具提示，可将工具提示移至图标上方/下方

JS视口检测，它将计算图标位置和视口宽度，并计算工具提示的最小宽度值并进行分配。

流体工具提示带绝对定位

0 个答案: