Tooltips screenshot

Hey team,
Do you have a working version of the tool tip you could share? Just want to get a sense of what it might be
Cheers!

Hi Tristan, we don’t currently have a design for the tooltip, it is in our backlog that we hope to progress to development in the future. If you, or anyone else out there creates a solution for the tooltip, please share it here and we can use this community to peer review and publish your contribution to the Design System.

Hey @tristan.deratz - out of interest, what can you tell us about the proposed use case - I’m guessing this is for some internal enterprise interface?

Were you thinking of something extensive like this Inline dialog from Atlassian Design System and their Inline messages components or something simpler, like their tooltips?

Also worth noting that inclusive-components.design has a great write up of the tooltip component, its best use cases and the ways to built it inclusively. Take a look at it here:

Keen to hear more about what you’re making and explore the solutions with our other UXers here!

1 Like

Hey @JamesFehon thanks for the links - I’ve read that one before, it’s a really good post.

The use case for us is in online legal forms. We need to help people understand jargon terms while they are filling out the form.

I think the inline dialog model from Atlassian is the kind of thing that we’re after.

I’ve been very apprehensive about getting an accessible solution!

2 Likes

@tristan.deratz I know we had a chat by email but wanted to add some of the ideas here for others too!

The Form UI components currently have a ‘Helper text’ designed, which would I think is the easiest way to provide in-place assistance on forms. It can include a link off to a full page of content that explains the jargon or complex concepts in detail.

From the Patterns pages:

Helper text

Use help text to provide additional context, information or as an example to complete a field input.
Do not use infield placeholder text.

So it probably should be used for explanations specifically on forms.

That said - I personally quite like this UK Gov form approach shown here (it’s their “Details” component, and often seen after the input field, but before the action). @jennifer.weiley recently mentioned it in another post.

Screenshot showing a form with the UK Gov Details component

A live example of the component in that screenshot is used in this Register to Apply for US Global Entry beta (Select ‘No’ and Continue past the first page).

Will you and the team be mocking up a few versions of your prototypes that might help test these various approaches?

1 Like

Also hoping @tristan.deratz that you’ll be doing your best to eliminate jargon so there is no need to explain it anyway. :slight_smile:

1 Like

Well, ideally for sure, but the Courts often have specific terms that are used in court and through the whole legal process that we need to acquaint citizens with. We want to break them down as much as possible but ultimately terms like ‘defendant’ or ‘plaintiff’ are words that need to be known.

2 Likes