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

时间：2020-10-02 14:08:23

标签： css tooltip css-position

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

  • 被放置在参考文字的正上方，并且
  • 占据参考文本容器的整个宽度

...同时？

enter image description here

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

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

2 个答案:

答案 0 :(得分：0)

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

此处的代码段通过将工具提示放置在其描述的文本之后来更改原始问题，这是因为我无法确定工具提示是否在上方，并且不允许工具提示中的文本都具有任意长度（可能会跨越多行），并且如果该文本位于显示页面的顶部附近，则不会覆盖其相关文本。

问题中对代码段的更改是：删除顶部并在.tooltip中转换CSS，并用left：0替换；更改HTML，以使文本及其工具提示位于不同的范围内；放入一条CSS规则，如果其兄弟文本具有hastooltip类，则会更改工具提示的外观（display：block）

在定位工具提示（边距/填充）方面需要进行一些整理，具体取决于所需的外观，但我希望这能提供一个基本的想法。

.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>

答案 1 :(得分：0)

垂直和水平对齐都需要相对定位。问题在于对齐方式需要对齐不同的元素，而我们只能使用一个元素。

因此问题可以表述为：我们可以以某种方式替换两个相对位置中的一个吗？

尝试在:: before / :: after进行尝试，事实证明垂直位置可以用它们代替。缺点是它是固定的：工具提示始终在参考文本的上方或下方，但作为回报，没有javascript。

我也将这个解决方案与控制结合在一起，将其与G-Cyrillus提供的另一个stackoverflow答案相结合，该答案采用了“ focus”和“ tabindex”。最后，为了完整起见，还应用了一些过渡。

.has-tooltip-before::before {
  transform: translateY(calc(-100% - 5px));
  position: absolute;
  pointer-events: none;
  content: attr(data-tooltip);
  left: 5px;
  right: 5px;
  background-color: white;
  color: red;
  border: 1px solid red;
  padding: 5px;
  opacity: 0;
  transition: opacity 1s;
}

.has-tooltip-after::after {
  transform: translateY(calc(1em + 5px));
  position: absolute;
  pointer-events: none;
  content: attr(data-tooltip);
  left: 5px;
  right: 5px;
  background-color: white;
  color: red;
  border: 1px solid red;
  padding: 5px;
  opacity: 0;
  transition: opacity 1s;
}

.has-tooltip-before:focus::before,
.has-tooltip-after:focus::after {
  opacity: 1;
}

.has-tooltip-before,
.has-tooltip-after {
  cursor: pointer;
  border-bottom: 1px dotted;
  color: black;
}

.has-tooltip-before:focus,
.has-tooltip-after:focus {
  outline: none;
}

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

body {
  text-align: justify;
}

span {
  color: dimgray;
}
<div class="container">
  <span>
    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.
    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-before"
    tabindex="0"
    data-tooltip="TOOLTIP ABOVE: 
      positioned above the reference text
      ...AND at the same time...
      it takes up the full width of the parent's container.
      Employes pure CSS for both positioning & control.
      Works with both pointer and touch."
  >
    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>
    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-after"
    tabindex="0"
    data-tooltip="TOOLTIP BELOW: 
      positioned below the reference text
      ...AND at the same time...
      it takes up the full width of the parent's container.
      Employes pure CSS for both positioning & control.
      Works with both pointer and touch."
  >
    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>
    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.
    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>
</div>

相关问题
最新问题