tooltip

Tooltip descriptions should only contain one or two words, like “close,” “clear,” “save” or “increase quantity.”

Examples:

• A text input uses an icon to show that the field can be cleared. Use a tooltip to describe the action: “Clear”
• An icon-only button is used to close a modal. Use a tooltip to describe what acting upon the button will do: “Close”
• A toolbar within a content editor contains multiple icon-based actions. Use a tooltip to describe what each action does: “Left-align”
• A quantity counter uses "-" and "+" symbols to increase or decrease the number of items that will be added to a user’s cart. Use a tooltip to describe the actions: “Decrease quantity” and “Increase quantity"

What Cedar provides

• Adds hover and focus handlers to trigger element to manage tooltip state
• Dynamically sets aria-described-by on the trigger element to point to the id of the tooltip
• Adds role="tooltip" to the tooltip content
• Tooltip content is visible to screen readers even when it is closed
• Tooltip content can be hovered over without the tooltip closing
• Tooltip can be closed by removing focus from the trigger, removing hover from the trigger or content, or by pressing the esc key

Development responsibilities

When using this component, here's what you are responsible for:

• Set an id property on the CdrTooltip. The component will automatically link that id to the trigger element
• Content passed into the trigger slot must be an actionable element such as a button
• Tooltip content should directly describe the element that triggers it. For example, providing more information or context about what an input does, or adding a textual description of an icon-only button
• Avoid rich content. Formatting such as bold text, italics, headings, icons, etc. is not conveyed through aria-describedby or aria-labelledby
• Do not add interactive content such as links or buttons within a tooltip
• Do not put essential information in tooltips
• Do not use a timeout to hide the tooltip

CdrTooltip is a wrapper component that accepts a trigger element and tooltip content. When the trigger element is hovered or focused, the tooltip content is rendered. Event bindings between the trigger and the tooltip are set up automatically. The tooltip will dynamically update its position property to ensure it renders on screen. Disable this functionality by setting autoPosition to false.

<cdr-tooltip id="tooltip-example" position="top">
  <template #trigger>
    <cdr-button :icon-only="true" :with-background="true">
      <template #icon>
        <icon-information-stroke/>
      </template>
    </cdr-button>
  </template>
  <div>
    On hover or focus, I provide more information about what this button does
  </div>
</cdr-tooltip>

Custom trigger

Use the open prop to programmatically control CdrTooltip. However, you must implement certain behavior yourself:

• Wrap the CdrTooltip element and the trigger element in a div with position: relative and width: max-content
• Toggle the open property to true on mouseover and focus, and toggle to false on blur and focus
• Set the trigger element’s aria-describedby property to the ID of the CdrTooltip

<div style="position: relative; width: max-content;">
  <cdr-button
    @mouseover="open = true"
    @mouseleave="open = false"
    @focus="open = true"
    @blur="open = false"
    :icon-only="true"
    :with-background="true"
    aria-describedby="tooltip-custom-example"
  >
    <template #icon>
      <icon-information-stroke/>
    </template>
  </cdr-button>
  <cdr-tooltip id="tooltip-custom-example" position="top" :open="open">
    <div>
      On click, I provide additional information to the user
    </div>
  </cdr-tooltip>
</div>