Corncob Design Language

Tooltips

Tooltips are used to provide additional information about an element on the page. They can be triggered by hovering over an element or by focusing on it with the keyboard. Tooltips can contain any type of content, including text, images, and interactive elements.

Tooltips are built with the corn-tooltip web component and can be positioned in any of the following directions: top, right, bottom, and left. The tooltip will automatically adjust its position to stay within the viewport if there is not enough space in the specified direction.

The Tooltip component uses the position attribute to determine where to display the tooltip content in relation to the anchor element. The anchor element is the element that triggers the tooltip when interacted with. The tooltip content is defined within the corn-tooltip element and can include any HTML content, such as text, images, or interactive elements like links and buttons.

Tooltips are designed to be accessible and include appropriate ARIA attributes to ensure that they can be used by all users, including those using assistive technologies. The tooltip will automatically manage focus and keyboard interactions to provide a seamless user experience. The component automatically sets aria-labelledby on the .corn-tooltip--anchor element to associate it with the tooltip’s id, so no additional ARIA attributes are required on the trigger element.

The corn-tooltip--anchor class is used to wrap the trigger element and the tooltip content, ensuring that they are properly associated and that the tooltip is positioned correctly in relation to the trigger element.

<button class="corn-button corn-tooltip--anchor">
  Default (Top)
  <corn-tooltip position="top" class="corn-tooltip">
    Default tooltip
  </corn-tooltip>
</button>

Position Modifiers

The default position for the tooltip is top, but it can be positioned in any of the following directions:

top
right
bottom
left

Top

<button class="corn-button corn-tooltip--anchor">
  Default (Top)
  <corn-tooltip position="top" class="corn-tooltip">
    Default tooltip
  </corn-tooltip>
</button>

Right

<div class="corn-tooltip--anchor">
  <button class="corn-button">
    Right
  </button>
  <corn-tooltip position="right" id="tooltip-right" class="corn-tooltip">
    Right tooltip
  </corn-tooltip>
</div>

Bottom

<div class="corn-tooltip--anchor">
  <button class="corn-button">
    Bottom
  </button>
  <corn-tooltip position="bottom" id="tooltip-bottom" class="corn-tooltip">
    Bottom tooltip
  </corn-tooltip>
</div>

Left

<div class="corn-tooltip--anchor">
  <button class="corn-button">
    Left
  </button>
  <corn-tooltip position="left" id="tooltip-left" class="corn-tooltip">
    Left tooltip
  </corn-tooltip>
</div>

:root {
  --cc-tooltip--background: var(--cc-black);
  --cc-tooltip--color: var(--cc-white);
  --cc-tooltip--font-size: var(--cc-size--1);
  --cc-tooltip--padding: 0.25rem 0.5rem;
  --cc-tooltip--border-radius: var(--cc-border--radius);
  --cc-tooltip--box-shadow: var(--cc-shadow--drop);
  --cc-tooltip--transition: opacity var(--cc-transition--easing) var(--cc-transition--time);
}