Ready

Infotip

An infotip is an informational icon that draws a user's attention to additional, but non critical, information about a function or feature on the screen. It works in conjunction with the tooltip to display read-only text on hover of the infotip icon.

Ready

Infotip

An infotip is an informational icon that draws a user's attention to additional, but non critical, information about a function or feature on the screen. It works in conjunction with the tooltip to display read-only text on hover of the infotip icon.

Ready

Infotip

An infotip is an informational icon that draws a user's attention to additional, but non critical, information about a function or feature on the screen. It works in conjunction with the tooltip to display read-only text on hover of the infotip icon.

Anatomy

Anatomy

Anatomy

  1. Icon

  2. Tooltip

States

States

States

  1. Default

  2. Hover

  3. Disabled

Best Practices

Best Practices

Best Practices

1. Usage

Don't use infotips to call out information that is vital to task completion. Infotips are best used when they provide additional, but non-critical information about a function or element on the screen. Since infotips display a tooltip, the same guidelines for using tooltips apply.

2. Short and Concise

Keep the information short and concise. 2-3 lines is the recommended length. Long blocks of text can be difficult to read and can obscure related content.

3. Auxiliary Information

Don't use an infotip to provide redundant information. Infotips should only provide auxiliary information. Infotips can be used in conjunction with a dotted link tooltip if additional, supportive information is needed.

4. Placement

Position infotips to the right of the element they are supporting.

Need more guidance?

Suggest an addition or an edit.

Need more guidance?

Suggest an addition or an edit.

Need more guidance?

Suggest an addition or an edit.

© 2025 Basis Technologies
© 2025 Basis Technologies
© 2025 Basis Technologies