title: Show tooltip when text is selected
body: <p>Once a text is selected, I want to show a tooltip at the bottom that says "Copied!" and also the tooltip must be at the center of the selection. Although I'm not sure how to implement the tooltip to show up after it is selected. This is what I've done so far...</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;p&gt;
     &lt;span class="selectable" tooltip="Copied!" tooltip-position='bottom'&gt;
      Some lines of code
     &lt;span&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>CSS (for the tooltip)</p>
  
  <pre><code>[tooltip]{
    position:relative;
    display:inline-block;
  }
  [tooltip]::before {
      content: "";
      position: absolute;
      top:-6px;
      left:50%;
      transform: translateX(-50%);
      border-width: 4px 6px 0 6px;
      border-style: solid;
      border-color: rgba(0,0,0,0.9) transparent transparent;
      z-index: 99;
      opacity:0;
  }
  [tooltip-position='bottom']::before{
    top:100%;
    margin-top:8px;
    transform: translateX(-50%) translatey(-100%) rotate(-180deg)
  }
  [tooltip]::after {
      content: attr(tooltip);
      position: absolute;
      left:50%;
      top:-6px;
      transform: translateX(-50%)   translateY(-100%);
      background: rgba(0,0,0,0.9);
      text-align: center;
      color: #fff;
      padding:4px 2px;
      font-size: 12px;
      min-width: 80px;
      border-radius: 5px;
      pointer-events: none;
      padding: 4px 4px;
      z-index:99;
      opacity:0;
  }
  [tooltip-position='bottom']::after{
    top:100%;
    margin-top:8px;
    transform: translateX(-50%) translateY(0%);
  }
  
  [tooltip]:active::after,[tooltip]:active::before {
     opacity:1
  }
  </code></pre>
  
  <p>Any help would appreciated. Also vanilla javascript is preferred.</p>