Tooltips

Tooltips can add additional context to an element on hover or touch. They require a bit of JavaScript, found in fizz.js. Tooltips can be manually aligned relative to their trigger. The text span ("Order Day", in the example) is optional and the icon can be whatever you want it to be.

Left/Bottom

The default tooltip (.fizz-tooltip) is positioned flush left with the trigger and to the bottom.

HTML

<div class="fizz-tooltip-container">
  <button class="fizz-tooltip-trigger fizz-flex-row-8"
          aria-describedby="tooltip-desc1">
    <span>Order Day</span>
    <svg class="fizz-icon-16">
      <use href="#info"></use>
    </svg>
  </button>
  <div class="fizz-tooltip"
       role="tooltip"
       id="tooltip-desc1">
    Order Day is based on the most common order day of recenlty placed orders.
  </div>
</div>

Center/Bottom

Add .fizz-tooltip-center to .fizz-tooltip to align the tooltip with the center of the trigger.

HTML

<div class="fizz-tooltip-container">
  <button class="fizz-tooltip-trigger fizz-flex-row-8"
          aria-describedby="tooltip-desc2">
    <span>Order Day</span>
    <svg class="fizz-icon-16">
      <use href="#info"></use>
    </svg>
  </button>
  <div class="fizz-tooltip fizz-tooltip-center"
       role="tooltip"
       id="tooltip-desc2">
    Order Day is based on the most common order day of recenlty placed orders.
  </div>
</div>

Right/Bottom

Add .fizz-tooltip-right to .fizz-tooltip to align the tooltip flush right with the trigger.

HTML

<div class="fizz-tooltip-container">
  <button class="fizz-tooltip-trigger fizz-flex-row-8"
          aria-describedby="tooltip-desc3">
    <span>Order Day</span>
    <svg class="fizz-icon-16">
      <use href="#info"></use>
    </svg>
  </button>
  <div class="fizz-tooltip fizz-tooltip-right"
       role="tooltip"
       id="tooltip-desc3">
    Order Day is based on the most common order day of recenlty placed orders.
  </div>
</div>

Top Alignment

Add .fizz-tooltip-top to .fizz-tooltip to align the tooltip to the top of its trigger.

Left/Top

HTML

<div class="fizz-tooltip-container">
  <button class="fizz-tooltip-trigger fizz-flex-row-8"
          aria-describedby="tooltip-desc4">
    <span>Order Day</span>
    <svg class="fizz-icon-16">
      <use href="#info"></use>
    </svg>
  </button>
  <div class="fizz-tooltip fizz-tooltip-center"
       role="tooltip"
       id="tooltip-desc4">
    Order Day is based on the most common order day of recenlty placed orders.
  </div>
</div>

Center/Top

HTML

<div class="fizz-tooltip-container">
  <button class="fizz-tooltip-trigger fizz-flex-row-8"
          aria-describedby="tooltip-desc5">
    <span>Order Day</span>
    <svg class="fizz-icon-16">
      <use href="#info"></use>
    </svg>
  </button>
  <div class="fizz-tooltip fizz-tooltip-top fizz-tooltip-center"
       role="tooltip"
       id="tooltip-desc5">
    Order Day is based on the most common order day of recenlty placed orders.
  </div>
</div>

Right/Top

Add .fizz-tooltip-right to .fizz-tooltip to align the tooltip flush right with the trigger.

HTML

<div class="fizz-tooltip-container">
  <button class="fizz-tooltip-trigger fizz-flex-row-8"
          aria-describedby="tooltip-desc6">
    <span>Order Day</span>
    <svg class="fizz-icon-16">
      <use href="#info"></use>
    </svg>
  </button>
  <div class="fizz-tooltip fizz-tooltip-right fizz-tooltip-top"
       role="tooltip"
       id="tooltip-desc6">
    Order Day is based on the most common order day of recenlty placed orders.
  </div>
</div>

Overriding the default size

Tooltips have a maximum size of 180px on small screens and 320px on large screens, but you can override this with inline CSS custom properties, --min-width (maximum size on small screens) and --max-width (maximum size on large screens). Be sure to test custom sizes on both large and small screens.

HTML

<div class="fizz-tooltip-container">
  <button class="fizz-tooltip-trigger fizz-flex-row-8"
          aria-describedby="tooltip-desc7">
    <span>Order Day</span>
    <svg class="fizz-icon-16">
      <use href="#info"></use>
    </svg>
  </button>
  <div class="fizz-tooltip"
       role="tooltip"
       id="tooltip-desc7"
       style="--min-width: 100px; --max-width: 400;">
    Here's a tooltip with custom min/max width
  </div>
</div>

Accessibility

Be sure to include the aria-describedby attribute on the tooltip trigger and set it to a unique id attribute on the tooltip itself.