Tooltips

<div class="c-tooltip">
  <div class="c-tooltip__trigger">
    <button class="c-button">
      <span class="c-button__label">Default tooltip</span>
    </button>
  </div>
  <div class="c-tooltip__overlay">
    <div class="c-tooltip__content">
      Default tooltip.
      <a href="#">Read more</a>
    </div>
  </div>
</div>

<div class="c-tooltip c-tooltip--top-left">
  <div class="c-tooltip__trigger">
    <button class="c-button">
      <span class="c-button__label">Top left</span>
    </button>
  </div>
  <div class="c-tooltip__overlay">
    <div class="c-tooltip__content">Top left tooltip</div>
  </div>
</div>
<div class="c-tooltip c-tooltip--top-right">
  <div class="c-tooltip__trigger">
    <button class="c-button">
      <span class="c-button__label">Top right</span>
    </button>
  </div>
  <div class="c-tooltip__overlay">
    <div class="c-tooltip__content">Top right tooltip</div>
  </div>
</div>
<div class="c-tooltip c-tooltip--bottom-left">
  <div class="c-tooltip__trigger">
    <button class="c-button">
      <span class="c-button__label">Bottom left</span>
    </button>
  </div>
  <div class="c-tooltip__overlay">
    <div class="c-tooltip__content">
      Bottom left tooltip
    </div>
  </div>
</div>
<div class="c-tooltip c-tooltip--bottom-right">
  <div class="c-tooltip__trigger">
    <button class="c-button">
      <span class="c-button__label">Bottom right</span>
    </button>
  </div>
  <div class="c-tooltip__overlay">
    <div class="c-tooltip__content">
      Bottom right tooltip
    </div>
  </div>
</div>