title: How can I create a responsive tooltip with just css3?
body: <p>So I have a word in a paragraph that will have a tooltip.</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-html lang-html prettyprint-override"><code>&lt;div&gt;
    lorem 
    &lt;div class="word"&gt;
      ipsum
      &lt;div class="definition"&gt;this will be the tooltip text&lt;/div&gt;
    &lt;/div&gt; 
    blah blah blah
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Right now using jQuery I set the <code>definition</code> element to be visible upon mouseover.</p>
  
  <p>The word <code>ipsum</code> will be a dynamic word and the definition will be a dynamic set of words. I need to have definition be above <code>ipsum</code> while centered over the word <code>ipsum</code> with padding.</p>
  
  <p><code>ipsum</code> needs to be inline or inline-block so that the paragraph is undisturbed.</p>
  
  <p>How can I get the definition element to be perfectly centered over the word <code>ipsum</code> with a dynamic size using only css?</p>
  
  <p>I keep getting it centered over the left of the element or centered with the relative position, but it takes up space that it shouldn't in the word element.</p>