title: CSS Only Tooltip Arrow - With Background, Border & Box-shadow?
body: <h2>Tooltip CSS</h2>
  
  <pre><code>.has-tooltip .tooltip {
      position: absolute;
      left: 50%;
      top: -40px;
      opacity: 0;
      -webkit-transition: ease-out 300ms opacity;
         -moz-transition: ease-out 300ms opacity 0ms;
           -o-transition: ease-out 300ms opacity 0ms;
              transition: ease-out 300ms opacity 0ms;
      -webkit-transition-delay: 0ms;
      pointer-events: none;
      z-index: 9999;
  }
  .has-tooltip .tooltip span {
      position: relative;
      left: -50%;
      display: block;
      padding: 2px 8px;
      font-size: 14px;
      color: #fff;
      white-space: nowrap;
      background: rgba(45, 45, 45, 1);
      border: 1px solid rgba(204,204,204,0.60);
      -webkit-border-radius: 6px;
         -moz-border-radius: 6px;
              border-radius: 6px;
      -webkit-box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
         -moz-box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
              box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
  }
  </code></pre>
  
  <h2><a href="http://codepen.io/MrTIMarshall2512/pen/jBdvmp?editors=1100" rel="nofollow noreferrer">View Live Example</a></h2>
  
  <h2>What I Am Trying To Achieve</h2>
  
  <p>By only having one element, have a tooltip styled as seen in the link above with a tooltip arrow which also has the same look applied to appear to be one element. I've seen multiple which place another element within for the arrow however I'm hoping to achieve this without needing to do so.</p>
  
  <h2>Questions</h2>
  
  <p>How can I have a tooltip arrow which gives the impression it is part of the tooltip with the same styles applied.</p>
  
  <p><strong>Note:</strong> If you provide code, could you please fully explain what you have done so I can implement a top tip as well as a bottom tip.</p>