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.
A tooltip provides additional brief information about a page element or feature. On hover or via touch. This component is one part of our contextual help pattern.
Use a Tooltip to describe the meaning for example on a label. Keep it brief! Short text fragments intended to be selfsufficient.
The tooltip is presented via hover on desktop and touch on mobile. The tooltip should always be visible within the viewport. The arrow on the tooltip should point at the target beeing hovered.
Use the Icon button with the question mark icon (Fontawesome) to inform the user there is more information. You can also use a dotted line under the label/content if the space is to small for an icon.
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.
The user will probably need information that answers these questions:
Use the tool tip to briefly explain a word or subheading:
Use the tool tip to help the customer understand the interface:
Use the tooltip to help the customer understand the service, and make knowledge-based decisions:
Don’t start each word in headings and labels with upper case. Only use upper case in:
Max width for tooltip: 343 px.