title: Tooltip: position & full width (at the same time)
body: <p>What CSS would force a tooltip:-</p>
  <ul>
  <li>to be positioned just above its reference text and</li>
  <li>to take up the full width of its reference text's container</li>
  </ul>
  <p>...at the same time?</p>
  <p><a href="https://i.stack.imgur.com/VgXOz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VgXOz.png" alt="enter image description here" /></a></p>
  <p>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?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
        &lt;span class="filler"&gt;
          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.
        &lt;/span&gt;
        &lt;span class="has-tooltip"&gt;
          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.
            &lt;span class="tooltip"&gt;
              Tooltip: position &amp; full width (at the same time)?
            &lt;/span&gt;
        &lt;/span&gt;
        &lt;span class="filler"&gt;
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
          Aenean commodo ligula eget dolor.
        &lt;/span&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>