effeckt.css tooltip class reuse

effeckt-tooltip.scss

[data-effeckt-tooltip-text] {
  position: relative;
}

// probably should make various things into variables, like colors
.effeckt-tooltip[data-effeckt-tooltip-text] {
  &::before, &::after {
    opacity: 0;
    transition: 0.2s; // no delay on hover off
  }
  &::after { // text of tooltip
    content: attr(data-effeckt-tooltip-text);
    position: absolute;
    left: 50%;
    transform: translateX(-50%); // horizontal centering
    border-radius: 10px;
    background: #333;
    color: white;
    padding: 0.45rem 0.8rem;
    font-size: 90%;
    white-space: nowrap;
    visibility: hidden;
  }
  &::before { // triangle / speech bubble arrow
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    position: absolute;
    left: 50%;
    margin-left: -5px;
  }
  &:hover::before, &:hover::after {
    visibility: visible;
    opacity: 1;
    transition: 0.2s 0.3s; // slight delay on hover on
  }
}

.effeckt-tooltip[data-effeckt-tooltip-align="above"]{
  &::after, &::before{
    bottom: 125%;
  }
  &::before{
    border-top: 5px solid #333;
    margin-bottom: -4px; // one less pixel to prevent occational 1px gap
  }
  &:hover::before, &:hover::after{
    bottom: 115%;
  }
}

.effeckt-tooltip[data-effeckt-tooltip-align="below"]{
  &::after, &::before{
    top: 125%;
  }
  &::before{
    border-bottom: 5px solid #333;
    margin-top: -4px; // one less pixel to prevent occational 1px gap
  }
  &:hover::before, &:hover::after{
    top: 115%;
  }
}

effeckt-tootip.hbs

<div class="effeckt effeckt-demo-tooltips">

  <header>
    <h2>
      Tooltips
      <a href="tooltips.html">#</a>
    </h2>
    <!-- <span class="source">
      ...
    </span> -->
  </header>

  <p>Lorem ipsum <a href="#0" data-effeckt-tooltip-text="I appear on top." data-effeckt-tooltip-align="above" 
  class="effeckt-tooltip">example one</a> dolor sit amet, consectetur adipisicing elit. Unde, dolor, 
  <a href="#0" data-effeckt-tooltip-text="I appear on bottom." data-effeckt-tooltip-align="below" class="effeckt-tooltip">
  example two</a> ipsa, dolorem officia expedita error vel blanditiis tempore molestias voluptatem ducimus porro recusandae 
  quo ex quisquam voluptas iure! Amet, dignissimos.</p>

</div>