title: Pure CSS: Center Tooltip Above Text On Hover pt. 2
body: <p>Expanding on <a href="https://stackoverflow.com/questions/16754726/pure-css-center-tooltip-above-text-on-hover">Pure CSS: Center Tooltip Above Text On Hover</a> -- <strong>how does one make the tooltip hover centered relative to its container if the tooltip is wider than said container?</strong></p>
  
  <p><a href="http://jsbin.com/idudal/24/edit" rel="noreferrer">http://jsbin.com/idudal/24/edit</a></p>
  
  <p>Ie. this (where <code>drag drag drag</code> gets cut off):</p>
  
  <p><img src="https://i.stack.imgur.com/O76gH.jpg" alt="enter image description here"></p>
  
  <p>Should appear as:</p>
  
  <p><img src="https://i.stack.imgur.com/6zX1u.jpg" alt="enter image description here"></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;span id="test" class="drag-hint"&gt;&lt;span&gt;drag drag drag drag drag&lt;/span&gt;Hover me&lt;/span&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.drag-hint {
    position:relative;
    margin: 50px;
  }
  .drag-hint &gt; span {
    background: black;
    color: white;
    white-space: nowrap;
    display:none;
  }
  .drag-hint:hover &gt; span {
    display: inline;
    position:absolute;
    top: -25px;
    left: 0;
    right: 0;
    text-align: center;
  }
  </code></pre>