Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Tooltip

A tooltip is a text label that acts as a helper to a specific item.

Guidelines

Short description

A tooltip contains brief information about an item being hovered on with a cursor or via touch.

When and how to use it

Use a tooltip when you want to give additional information that would help the user understand, i.e. number formatting for a phone number or cut off times for bank-to-bank transfers and should not be visible all the time.

Behaviour

The tooltip should always be visible within the viewport and never be partially out of bounds. It's marked with an questionmark-symbol, and the tooltip is displayed when hovering the symbol. See more on Contextual help button.

The directional arrow shows the location of what triggered the tooltip.

In a space-challenged area (such as table header), use a dotted line instead of the information symbol to save space.

Do's and don'ts

  • Be specific and short. Keep the text below the recommended 140 characters.
  • Use a tooltip to add brief messages that act as helper texts

 

  • Don't add images or formatted text into a tooltip.
  • Don't use a tooltip to describe a complex process.

Related links

https://uxplanet.org/tooltips-in-ui-design-f63e117aa3d1

Copy

Note!

The tooltip is small and highly contextual. We recommend a maximum of 140 characters; hence it is quite a challenge to keep it short but still friendly.

  • Use it to add brief information about the specific element.
  • Use it to providing specific information, for example how to change tax domicile.

Helpful questions

The user will probably need information that answers these questions:

What is this?

Use the tool tip to briefly explain a word or subheading:

"Courtage är en försäljningskommission som banken tar ut när du köper eller säljer värdepapper."

"Brokerage is a sales commission that the bank charges when you buy or sell securities."

What does it do? How does it work?

Use the tool tip to help the customer understand the interface:

"Första möjliga datum för betalningen är förvalt."

"The first possible date for the payment is default."

How do I use it?

Use the tooltip to help the customer understand the service, and make knowledge-based decisions:

"Texten visas på ditt konto. Om du lämnar fältet tomt visas istället de 12 första siffrorna i mottagarkontot."

"The text will appear on your account. If you leave the field blank, the first 12 digits of the recipient account will be displayed instead."

 

Do's and dont's

  • Don't write crucial information in a tool tip.
  • Don’t write the obvious, eg. Enter your name in a field tagged Name. Tooltips with obvious or redundant text are not beneficial to the customers.
  • Don't explain in a logical loop, eg. xxx

 

Specification

Measurements

States

Colours

  • Grey 900

Related patterns & components

Page last updated

Feedback

Was this helpful?