Tooltip: position & full width (at the same time)

问题

What CSS would force a tooltip:-

to be positioned just above its reference text and
to take up the full width of its reference text's container

...at the same time?

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>

回答1:

The question is how to get a tooltop positioned in relation to the text it is describing and have it positioned and sized in relation to the containing block.

The snippet here changes the original question by placing the tooltip after the text it describes, this is because I cannot work out what is being asked for if the tooltip is above and allow both the text within the tooltip to be of arbitrary length (maybe going over many lines) and it not cover its related text if the text is near the top of the displayed page.

The changes to the snippet in the question are: remove the top and transform CSS in .tooltip and replace with left:0; change the HTML so the text and its tooltip are in separate spans; put in a CSS rule that changes the tooltip appearance (display:block) if its sibling text has has-tooltip class

There is some tidying up to be done in terms of positioning tooltip - margins/padding - depending on exactly what look is required but I hope this gives a basic idea.

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

回答2:

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?

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>

来源：https://stackoverflow.com/questions/64172975/tooltip-position-full-width-at-the-same-time

标签

css

tooltip

css-position