title: CSS only tooltip
body: <p>I have tried the CSS only tooltip. However, I am not able to add a border to the tooltip's arrow. </p>
  
  <p>Here is my code (see <a href="http://jsfiddle.net/1u2kw86m/" rel="nofollow">http://jsfiddle.net/1u2kw86m/</a>):</p>
  
  <p><code>&lt;a href="#" class="tooltip" title="Automatic resize CSS"&gt;Test small Text&lt;/a&gt;</code></p>
  
  <pre><code>.tooltip {
      display: inline;
      position: relative;
  }
  
  .tooltip:hover {
      color: #000;
      text-decoration: none;
  
  }
  
  .tooltip:after {
      background: #ffffe1;
      border-radius: 4px;
      border:1px solid #DCA;
       box-shadow: 5px 5px 8px #ccc;
      bottom: 28px;
      color: #000;
      content: attr(title);
      display: block;
      left: 1em;
      padding:9px 8px 9px 8px;
      position: absolute;
      z-index: 98;
      min-width:200px;
      max-width:500px;
      font: 12px Arial, Helvetica, sans-serif;
      line-height:16px;   
  }
  
  .tooltip:before {
      border: solid;
      border-color: rgba(255,255,225,1) transparent;
      border-width: 15px 15px 0px 0px;
      bottom: 1em;
      content: "";
      display: block;
      left: 2em;
      position: absolute;
      z-index: 99;    
  }
  </code></pre>