Tooltip

Add sweet tooltips to your content.

Usage

<a class="c-tooltip" href="#">
  Tooltip Button
  <span class="c-tooltip__item">
    <span class="c-tooltip__item-inner">Tooltip</span>
  </span>
</a>

Modifiers

Tooltip right position

<a class="c-tooltip c-tooltip--right" href="#">
  Tooltip Button
  <span class="c-tooltip__item">
    <span class="c-tooltip__item-inner">Tooltip</span>
  </span>
</a>

Tooltip bottom position

<a class="c-tooltip c-tooltip--bottom" href="#">
  Tooltip Button
  <span class="c-tooltip__item">
    <span class="c-tooltip__item-inner">Tooltip</span>
  </span>
</a>

Tooltip left position

<a class="c-tooltip c-tooltip--left" href="#">
  Tooltip Button
  <span class="c-tooltip__item">
    <span class="c-tooltip__item-inner">Tooltip</span>
  </span>
</a>

Tooltip with icon

<a class="c-tooltip" href="#">
  {{ icon('calendar') }}
  <span class="c-tooltip__item">
    <span class="c-tooltip__item-inner">Tooltip</span>
  </span>
</a>