Design

Tooltip and Popover share the same component base. Both display contextual information, but their behaviour and purpose differ.

• Tooltip: Short contextual hints that appear on hover or focus, and disappear automatically.
• Popover: Persistent overlays that provide extra information or actions, such as links or preferences.

Both components follow the same tokenised structure for colours, spacing, and elevation to ensure consistency across brands and devices.

When to use it (and when not to)

Use a Tooltip when:

• You need to provide brief, contextual information about an element.
• The information helps clarify a label, icon, or control without interrupting the flow.
• The content is short, non-essential, and disappears automatically after focus or hover ends.

Use a Popover when:

• You need to display additional information, options, or actions that require user interaction.
• The content is richer (e.g. includes title, link, or button) and must persist until dismissed.
• The user needs time to read or interact with the content before closing it.

Avoid using both when:

• The content is critical to complete a task — use a modal instead.
• The message is too long to be displayed in a small floating container.
• The user might miss the message due to automatic disappearance or poor trigger placement.

Quick summary of accessibility & consistency

• Both Tooltip and Popover must comply with WCAG 2.1 (1.4.3, 1.4.13, 2.1.1) and EN 301 549 standards.
• Ensure a minimum contrast ratio of 4.5:1 between text and background.
• Tooltip: Triggered by hover or focus, dismissed on blur or Escape. Must be accessible via keyboard and announced using aria-describedby.
• Popover: Triggered by click or tap, dismissed via close button, external click, or Escape. Browser-managed focus: the popover is inserted into the tab order after the trigger, and focus returns to the trigger on close. Include aria-labelledby when a title is present.
• Always position the pointer or arrow so it clearly references the triggering element.
• Maintain consistent spacing and elevation across brands and viewports.

Properties

Anatomy

Tooltip-Popover

Background blur:

Bg Blur/Bg blur 30 (30px)

Background elevation: Elevation/M

Bubble

Width: 343

Background color: #000000, 55%

Border color: #FFFFFF

Stroke alignment: Outside

Border weight: 1

Border radius: 4

Title (Optional)

Text color: #FBFBFC

Font family: Toyota Type

Font weight: Regular

Font size: 22

Line height: 32

Icon Button (Optional)

Depends on: Icon Button

Type: Filled

State: Neutral

Size: SM

Mode: On Dark

Slot

Depends on: slot

Link (Optional)

Depends on: Link

Icon: <Instance name>

Type: Inline

Size: Small

State: Rested

Leading icon: False

Trailing icon: False

Arrow

Height: 6

Width: 20

Border color: #FFFFFF

Border weight: 1

Background color: #000000, 55%

Background blur:

C-HR/C-HR BG Blur (30px)

Note

The beak (arrow) visually connects the bubble to its trigger element. It can be positioned anywhere along the perimeter of the bubble — not limited to the four sides — so it may appear at the top-left, bottom-centre, or right-top edge, depending on the trigger’s placement and available viewport space.

The predefined beak positions included in the component (top, bottom, left, right) serve only as visual references. Actual placement should adjust dynamically based on context.

Note

The Popover includes a replaceable content slot that allows designers and developers to insert custom content (e.g. energy labels, text, or other components). Custom content must comply with Tooltip/Popover content guidelines (clarity, brevity, accessibility). Interactive elements placed inside must follow the system’s touch area and focus order rules.

States : Tooltip

The Tooltip variant supports arrow placement in four directions. It does not include a close button or link.

Top

Tooltip-Popover

Top: true

Bottom: false

Left: false

Right: false

Close Button: false

Link: false

Contrast: True

Left

Tooltip-Popover

Top: false

Bottom: false

Left: true

Right: false

Close Button: false

Link: false

Contrast: True

Right

Tooltip-Popover

Top: false

Bottom: false

Left: false

Right: true

Close Button: false

Link: false

Contrast: True

Bottom

Tooltip-Popover

Top: false

Bottom: true

Left: false

Right: false

Close Button: false

Link: false

Contrast: True

States : Popover

The Popover variant supports arrow placement in four directions and includes a close button, title, and link.

Top

Tooltip-Popover

Top: true

Bottom: false

Left: false

Right: false

Title + close button: true

Close Button: true

Link: true

Contrast: True

Left

Tooltip-Popover

Top: false

Bottom: false

Left: true

Right: false

Title + close button: true

Close Button: true

Link: true

Contrast: True

Right

Tooltip-Popover

Top: false

Bottom: false

Left: false

Right: true

Title + close button: true

Close Button: true

Link: true

Contrast: True

Bottom

Tooltip-Popover

Top: false

Bottom: true

Left: false

Right: false

Title + close button: true

Close Button: true

Link: true

Contrast: True

Variants

The component includes two visual variants to ensure legibility across different background contexts.

Contrast (True)

Tooltip-Popover

Contrast: True

Background: #1A1A1A

Text colour: #FFFFFF

Contrast (False)

Tooltip-Popover

Contrast: False

Background: #FFFFFF

Text colour: #1A1A1A

Both variants share identical behaviour, spacing, and accessibility rules. Use the Contrast (True) variant by default. Use the Contrast (False) variant when the component appears on dark backgrounds or over elements where higher contrast is required for readability and WCAG 2.1 AA compliance.

Modes

Toyota

Tooltip-Popover

Mode: Default

Lexus

Tooltip-Popover

Mode: Default

Minimum touch area

The Tooltip–Popover itself is not a directly interactive component. However, interactive elements inside it must respect the system’s minimum touch area standards:

• Icon Button: Minimum 44×44 px (EN 301 549 / WCAG 2.5.5 Level AA)
• Link / Text Link: Must remain fully focusable and tappable across devices

Composition

Layout and spacing

Bubble

Padding top: 16

Padding right: 16

Padding bottom: 20

Padding left: 16

Item spacing: 16

Bottom Content

Item spacing: 8

Width behaviour

Tooltip and Popover components use vertical auto layout with responsive width behaviour.

• The main container (Bubble) resizes with hug contents.
• A min-width of 150px ensures legibility for short tooltips or labels.
• A max-width of 320px prevents excessively long lines and improves readability.
• Text should wrap within these constraints and never be truncated or scroll horizontally.
• These values ensure optimal legibility, responsive resizing, and support for localisation (e.g. longer words in German or Finnish).

Styling

Colors

Name	Applied as	Applied to
color-surface-neutral-default	Background color	Bubble (Neutral)
color-surface-neutral-default	Background color	Bubble (Neutral)
color-surface-dim-neutral-subtle	Background color	Bubble (Contrast)
color-surface-dim-neutral-subtle	Background color	Bubble (Contrast)
color-foreground-neutral-emphasis	Text color	Content (Neutral)
color-foreground-neutral-emphasis	Text color	Content (Neutral)
color-border-contrast-emphasis	Border color / Text color	Bubble (Contrast)
color-border-contrast-emphasis	Border color / Text color	Bubble (Contrast)
color-surface-dim-neutral-default	Backdrop color	Backdrop
color-surface-dim-neutral-default	Backdrop color	Backdrop

Spacing

Name	Applied as	Applied to
spacing-xl	Padding top / left / right	Bubble
spacing-xl	Padding top / left / right	Bubble
spacing-2xl	Padding bottom	Bubble
spacing-2xl	Padding bottom	Bubble
spacing-xl	Margin bottom	Title
spacing-xl	Margin bottom	Title
spacing-sm	Margin top	Link
spacing-sm	Margin top	Link

Other tokens

Name	Applied as	Applied to
radius-sm	Border radius	Bubble
radius-sm	Border radius	Bubble
stroke-sm	Border weight	Bubble (Neutral / Contrast)
stroke-sm	Border weight	Bubble (Neutral / Contrast)

Usage

Best Practices

Guidance on where this component has been used

• Use Tooltips for short, non-interactive explanations triggered on hover or focus.
• Use Popovers for extended or actionable content (such as links, settings, or preferences).
• Avoid using Tooltips on mobile. They are not reliable on touch devices and should be replaced by inline text or contextual help patterns.
• Replace Popovers with a Bottom Sheet (Modal) on mobile to maintain accessibility and usability on touch interfaces.
• Do not include interactive elements inside Tooltips. Tooltips are purely informative and must disappear when focus or hover is lost.
• Ensure clear close and dismissal actions for Popovers, with proper focus management and keyboard accessibility.

Responsive Behaviour

Guidance on where this component has been used

• Use Popovers on desktop and tablet to display contextual or interactive content without leaving the current view.
• On mobile, replace both with a Bottom Sheet (modal-style overlay) to ensure tactile accessibility and usability on touch screens.
• The Bottom Sheet version keeps the same hierarchy and purpose but adapts the layout and interaction to smaller viewports.

Content / Copy Guidelines

Tooltip

• Keep text short and precise, ideally one short sentence or phrase (max. 80–100 characters in English).
• If the content exceeds the space, the text must wrap to a new line — never be truncated.
• Avoid formatting, links, or interactive elements inside tooltips.
• Use simple punctuation and sentence case.
• Keep language easy to translate and consistent across markets.

Popover

• Designed for longer content that may include short paragraphs, titles, or links.
• Recommended length: up to 300–350 characters to maintain readability and accessibility across viewports.
• If additional content is required, consider using a modal or side panel instead.
• When text length expands in other languages, the popover should resize dynamically to accommodate the content without truncation or horizontal scroll.
• Always check text wrapping behaviour in mobile and tablet layouts.

Internationalisation and readability

• The component must adapt to longer languages by expanding vertically or horizontally when needed.
• Avoid setting fixed heights for text areas.
• Keep the same visual hierarchy (title > body > link) regardless of language or text length.