title: How can i center the tooltip above the image?
body: <p>I tried to add some tooltips to my images but didn't find any way to center this tooltip above the image. Tried some solutions/ideas with <code>left: -50%;</code> but that won't work. The problem is, the tooltip itself has a dynamic width/height.</p>
  
  <p><strong>The Code (<a href="https://jsfiddle.net/bwank6hz/" rel="nofollow">https://jsfiddle.net/bwank6hz/</a>):</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div#garden_left {
    font-size: 0.7em;
    font-family: Verdana;
    height: 100%;
    width: 100%;
  }
  h5 {
    color: black;
    font-size: 1.2em;
    font-weight: bold;
    margin: 0;
    padding: 0;
  }
  figure {
    margin: 0;
    padding: 0;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
  }
  figure#lawn_mower {
    bottom: 0;
    position: absolute;
    right: 50%;
  }
  figure#lawn_mower img {
    height: auto;
    width: 50%;
  }
  figcaption {
    background: lightgray;
    border: 1px solid dimgray;
    border-radius: 0.2vw;
    bottom: 120%;
    font-size: 1.1em;
    height: auto;
    margin: 0;
    opacity: 0;
    padding: 0.2vw 0.6vw;
    position: absolute;
    visibility: hidden;
    white-space: nowrap;
    width: auto;
    z-index: 1;
  }
  figcaption::after {
    border-color: black transparent transparent transparent;
    border-style: solid;
    border-width: 8px;
    content: "";
    left: 50%;
    margin-left: -8px;
    position: absolute;
    top: 100%;
  }
  figure:hover figcaption {
    opacity: 1;
    visibility: visible;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="garden_left"&gt;
    &lt;figure id="lawn_mower"&gt;
      &lt;img src="http://www.kunkel-dienstleistungen.com/dev/img/lawn_mower.png" alt="lawn mower"&gt;
      &lt;figcaption&gt;
        &lt;h5&gt;Headline&lt;/h5&gt;
        Description with some text
      &lt;/figcaption&gt;
    &lt;/figure&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>