时间戳

首页 > 解决方案 > 工具提示：位置和全宽（同时）

css - 工具提示：位置和全宽（同时）

问题描述

什么 CSS 会强制使用工具提示：-

...同时？

在此处输入图像描述

默认情况下，考虑参考文本的第一个字符和最后一个字符之间的长度。如何使参考文本的最左右边缘被视为绝对定位子元素的长度？

.tooltip {
        width: 100%;
        margin: 0 auto;
        /* left: 0; */
        /* right: 0; */

        position: absolute;
        top: 0;
        transform: translateY(calc(-100% - 5px));
        background-color: white;
        color: red;
        border: 1px solid red;
      }

      .has-tooltip {
        position: relative;
        outline: 1px solid black;
      }
      
      /* ########### NOT IMPORTANT ############ */

      body {
        text-align: justify;
      }

      .container {
        display: table-cell;
        resize: both;
        overflow: auto;
        border: 1px solid gray;
        padding: 5px;
        width: 595px;
      }

      .filler {
        color: gray;
      }
<div class="container">
      <span class="filler">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Aenean commodo ligula eget dolor. Aenean massa.
        Cum sociis natoque penatibus et magnis dis parturient montes, 
        nascetur ridiculus mus. Donec quam felis, ultricies nec, 
        pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
      </span>
      <span class="has-tooltip">
        The tooltip spreads between the first and last characters of this text.
        Is there any way to force the tooltip to take up the 
        full width of this reference text while at the same time
        it is also absolute positioned to this reference text.
          <span class="tooltip">
            Tooltip: position & full width (at the same time)?
          </span>
      </span>
      <span class="filler">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Aenean commodo ligula eget dolor.
      </span>
    </div>

标签： csstooltipcss-position

解决方案

问题是如何让工具顶部相对于它所描述的文本定位，并使其相对于包含块定位和调整大小。

这里的代码片段通过将工具提示放在它描述的文本之后来更改原始问题，这是因为如果工具提示高于并且允许工具提示中的文本具有任意长度（可能会多行）并且如果文本靠近显示页面的顶部，则它不会覆盖其相关文本。

问题中对代码段的更改是：删除顶部并转换 .tooltip 中的 CSS 并替换为 left:0；更改 HTML，使文本及其工具提示位于不同的跨度中；如果同级文本具有 has-tooltip 类，则放入更改工具提示外观（显示：块）的 CSS 规则

在定位工具提示方面有一些整理工作 - 边距/填充 - 具体取决于所需的外观，但我希望这能提供一个基本概念。

.tooltip {
        width: 100%;
        margin: 0 auto;
        /* left: 0; */
        /* right: 0; */

        position: absolute;
        background-color: white;
        color: red;
        border: 1px solid red;
        left:0;
      }
      span.has-tooltip + span {
        display: block;
      }
      .has-tooltip {
        position: relative;
        outline: 1px solid black;
      }
      
      /* ########### NOT IMPORTANT ############ */

      body {
        text-align: justify;
      }

      .container {
        display: table-cell;
        resize: both;
        overflow: auto;
        border: 1px solid gray;
        padding: 5px;
      }
      .container, .tooltip {
        width: 595px;
      }

      .filler {
        color: gray;
      }
<div class="container">
      <span class="filler">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Aenean commodo ligula eget dolor. Aenean massa.
        Cum sociis natoque penatibus et magnis dis parturient montes, 
        nascetur ridiculus mus. Donec quam felis, ultricies nec, 
        pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
      </span>
      <span class="has-tooltip">
        The tooltip spreads between the first and last characters of this text.
        Is there any way to force the tooltip to take up the 
        full width of this reference text while at the same time
        it is also absolute positioned to this reference text.
      </span>
          <span class="tooltip">
            Tooltip: position & full width (at the same time)?
          </span>
      <span class="filler">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Aenean commodo ligula eget dolor.
      </span>
    </div>

推荐阅读