Tooltips contain information to help users understand actions or page elements. They are short and triggered by a user hovering with their keyboard or mouse over a UI element. 


Use tooltips for short explanations or supplemental descriptions of a feature.

Tooltips should have short, static information.
Don’t place actions in tooltips.
Avoid headers in tool tips. They should only be 3 lines in height, unless it’s a translation.

Don’t over-rely on tooltips
Tooltips are better suited for regular tasks where the user might need a reminder, rather than explaining an important setting or value the user might see rarely. 

If information is vital to understand or complete a step, then it should be visible above/next to the element, not hidden in the tooltip.

When to use Help Icons
Help icons can be used to indicate if a field has an available tooltip.

Use them to reduce information density on long forms the user uses regularly (e.g. adding a product) - but the information should be visible above the field (see form field guidelines) if there are few elements or the form is used rarely.


Explaining a column in a table.

Explaining a simple button (e.g. add, edit) on page.

Used alongside a help icon.



1. Background
This Houses content.

2. Content
This text provides context for the user. 


Tooltips Master



Notes + Specifications

View Developer Docs

Notes + Specifications

View Developer Docs


Max Width: 336px
Max Height:
 3 lines, 72px
Padding: 8px
Corner Radius: 4px
Shadow: Floating
Background color: Grey 70, 70% opacity

The tool tip should appear 8px up and to the right of the user’s cursor.


Text: Text
Color: White


Hovering on the "helper icon" triggers the Tooltip.

Actions are not available within tooltips.


Hovering on the "helper icon" triggers the Tooltip.

Actions are not available within tooltips.

© Copyright 2019 BigCommerce
© Copyright 2019 BigCommerce
Feedback or suggestions to help us improve BigDesign?  Contact Us