ic-design-system icon indicating copy to clipboard operation
ic-design-system copied to clipboard

Review tooltip guidance

Open GCHQ-Developer-718 opened this issue 5 months ago • 3 comments

What component is this related to?

Tooltip

Why do we need it?

Review whether tooltips should only be used on focusable elements, e.g. buttons. If this is the case:

  • Consider whether the example using a tooltip with a chip should be removed
  • Consider whether additional guidance needs to be added to make this clearer

Consider the following updates to the "when not to use" section:

  • Tooltips shouldn't be used for form validation - signpost users to the form validation pattern.
  • Tooltips shouldn't be used to provide additional information in form fields. Helper text should be used instead.

GCHQ-Developer-718 avatar Aug 07 '25 13:08 GCHQ-Developer-718

Discussed that the first step should be to research what is the correct\recommended approach for tooltips ie should they only be on focusable content & focusable elements? we have another pattern where we use tooltip truncation in data-table cells, which is not focusable.

Once a conclusion is reached, may need to re-evaluate tooltip truncation

ad9242 avatar Aug 13 '25 15:08 ad9242

Investigation and implementation (if it can be completed within the timebox). Consult with design

MI6-255 avatar Aug 14 '25 09:08 MI6-255

Discussed that the first step should be to research what is the correct\recommended approach for tooltips ie should they only be on focusable content & focusable elements? we have another pattern where we use tooltip truncation in data-table cells, which is not focusable.

Once a conclusion is reached, may need to re-evaluate tooltip truncation

The tooltip truncation pattern is currently not accessible for keyboard-only users, if used with a non-focusable element (e.g. in data tables), as a keyboard-only user has no way to get the tooltip to appear to see the full text.

GCHQ-Developer-718 avatar Aug 14 '25 09:08 GCHQ-Developer-718