<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
  <div>
    <div class="p-8">
      {{> atoms-tooltip(pos: "tooltip--black tooltip--top") }}
    </div>
    <div class="p-8">
      {{> atoms-tooltip(pos: "tooltip--black tooltip--bottom") }}
    </div>
    <div class="p-8">
      {{> atoms-tooltip(pos: "tooltip--black tooltip--left") }}
    </div>
    <div class="p-8">
      {{> atoms-tooltip(pos: "tooltip--black tooltip--right") }}
    </div>
  </div>
  <div>
    <div class="p-8">
      {{> atoms-tooltip(pos: "tooltip--grey-125 tooltip--top") }}
    </div>
    <div class="p-8">
      {{> atoms-tooltip(pos: "tooltip--grey-125 tooltip--bottom") }}
    </div>
    <div class="p-8">
      {{> atoms-tooltip(pos: "tooltip--grey-125 tooltip--left") }}
    </div>
    <div class="p-8">
      {{> atoms-tooltip(pos: "tooltip--grey-125 tooltip--right") }}
    </div>
  </div>
  <div>
    <div class="p-8">
      {{> atoms-tooltip(pos: "tooltip--red-600 tooltip--top") }}
    </div>
    <div class="p-8">
      {{> atoms-tooltip(pos: "tooltip--red-600 tooltip--bottom") }}
    </div>
    <div class="p-8">
      {{> atoms-tooltip(pos: "tooltip--red-600 tooltip--left") }}
    </div>
    <div class="p-8">
      {{> atoms-tooltip(pos: "tooltip--red-600 tooltip--right") }}
    </div>
  </div>
  <div>
    <div class="p-8">
      {{> atoms-tooltip(pos: "tooltip--yellow-400 tooltip--top") }}
    </div>
    <div class="p-8">
      {{> atoms-tooltip(pos: "tooltip--yellow-400 tooltip--bottom") }}
    </div>
    <div class="p-8">
      {{> atoms-tooltip(pos: "tooltip--yellow-400 tooltip--left") }}
    </div>
    <div class="p-8">
      {{> atoms-tooltip(pos: "tooltip--yellow-400 tooltip--right") }}
    </div>
  </div>
  <div>
    <div class="p-8">
      {{> atoms-tooltip(pos: "tooltip--green-400 tooltip--top") }}
    </div>
    <div class="p-8">
      {{> atoms-tooltip(pos: "tooltip--green-400 tooltip--bottom") }}
    </div>
    <div class="p-8">
      {{> atoms-tooltip(pos: "tooltip--green-400 tooltip--left") }}
    </div>
    <div class="p-8">
      {{> atoms-tooltip(pos: "tooltip--green-400 tooltip--right") }}
    </div>
  </div>
  <div>
    <div class="p-8">
      {{> atoms-tooltip(pos: "tooltip--blue-300 tooltip--top") }}
    </div>
    <div class="p-8">
      {{> atoms-tooltip(pos: "tooltip--blue-300 tooltip--bottom") }}
    </div>
    <div class="p-8">
      {{> atoms-tooltip(pos: "tooltip--blue-300 tooltip--left") }}
    </div>
    <div class="p-8">
      {{> atoms-tooltip(pos: "tooltip--blue-300 tooltip--right") }}
    </div>
  </div>
</div>