工具提示:位置和位置全宽(同时) [英] Tooltip: position & full width (at the same time)

问题描述

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

What CSS would force a tooltip:-

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

...同时?

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

By default, the length between the reference text's first and last characters are considered. How to make the reference text's most left and right edges to be considered the length for the absolutely positioned child element?

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

推荐答案

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

Both vertical and horizontal alignment requires relative positioning. The problem is that the alignments require different elements to align to, while we can use only one element.

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

So the problem can be rephrased as: can we substitute one out of the two relative positioning somehow?

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

Giving a try to ::before / ::after it has turned out that the vertical positioning can be substituted with them. The down side is that it is fixed: the tooltip is always above or always below to the reference text, but in return there is no javascript.

也使该解决方案具有完整的控制功能，我将其与

Making this solution complete with control too, I am combining it with another stackoverflow answer provided by G-Cyrillus which employes "focus" and "tabindex". Finally, for completeness, some transition has also been applied.

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

这篇关于工具提示:位置和位置全宽(同时)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！