Tooltips show some help and informative content, when the user hovers on them.



Storybook failed to load. Please connect to the VPN to access.


                                                                header="Tooltip header"
                                                                text="More info about the targeted element"
                                                                <div>Element which the tooltip is attached to</div>

Tooltip example with header and custom fade settings


Tooltips are used to display contextual information to the user. They do not force the user to act upon it like a modal, they are merely available for quick information or linked access to another object.


  • Tooltips generally do not have rich text formatting except maybe bold or italics in exception cases. In our exception, segmentations would be one of the exceptional use cases.
  • Tooltips are accessible only on action elements, like buttons, form fields, etc; a.k.a natively focusable HTML element.
  • Tooltips are generally not meant for touch screens. So use tooltips to describe additional context but not important information that should be known to the users.



A tooltip displays short sentences related to an element on mouse hover or focused via keyboard on that element.

When a tooltip is triggered, then it is dismissed when it no longer has focus (onBlur). If the tooltip is invoked with mouseIn, then it is dismissed with on mouseOut.

Standard delay we use for displaying a tooltip on hover is 500ms, but it is optional and can be adjusted as needed (eg. some infotips in Analytics are shown instantly).



Placement at the top

Placement tooltips top


Placement on the right

Placement tooltips right


Placement at the bottom start

Placement tooltips bottom start


By default a tooltip are positioned in relation to its target. It's an automatic placement, similar to what we have for the Userlane hints.

If there is a specific placement required, override the default placement.



Do's and dont's

  • Use max width: 250px
  • Use max 150 characters. Be concise!
  • Use rich text
  • Use tooltips to communicate crucial information
  • Use headers nor section titles