title: Tooltip with a triangle
body: <p>I have created a <a href="http://jsfiddle.net/dAutM/4/" rel="noreferrer">jsFiddle</a> for this question. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a.tip {
      position: relative;
  }
  
  a.tip span {
      display: none;
      position: absolute;
      top: -5px;
      left: 60px;
      width: 125px;
      padding: 5px;
      z-index: 100;
      background: #000;
      color: #fff;
      -moz-border-radius: 5px; /* this works only in camino/firefox */
      -webkit-border-radius: 5px; /* this is just for Safari */
  }
  
  a:hover.tip {
      font-size: 99%; /* this is just for IE */
  }
  
  a:hover.tip span {
      display: block;
  }
          </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;center&gt;&lt;a href="http://google.com/" class="tip"&gt;Link!&lt;span&gt;Hi its me!&lt;/span&gt;&lt;/a&gt;&lt;/center&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Basically I have a tooltip on my site, and it appears to the right of my link. But on the left hand side of the black box I would like a triangle attached to the box pointing to the link, is it possible to do this using only CSS? just like this but to the left</p>
  
  <p><img src="https://i.stack.imgur.com/VqaeR.png" alt="tooltip with arrow"></p>