Labels and Tooltips

Most controls that appear on your toolbar will require a text label that appears on, below or beside it. Keep this description as short as possible, preferably a single verb. For example, Open or Undo.

Every control that appears on your toolbar should have a tooltip, whether or not that control has an associated text label. The tooltip should be a concise description of the control, but should provide more information than its text label where possible. For example, Open an existing document, or Undo last operation.

Guidelines
  • For buttons that correspond directly to menu items, make the text label the same as the menu item, but without any trailing ellipsis. For example, Open, Save.

  • Do not provide access keys for toolbar buttons. Since toolbars are in the same keyboard focus context as the menubar, it would be too difficult to provide unique access keys for every menu title and toolbar control. Toolbars are primarily intended as a shortcut for mouse users, although they are keyboard-navigable for accessibility reasons.

  • If your toolbar is configured to show labels below button icons, show a label for every control on the toolbar. For example:

    Figure 5-3Toolbar with labels under all buttons
  • If your toolbar is configured to show labels beside button icons rather than below them (using the "priority text" setting), do not show labels for every button. Show labels only for the buttons that will be most-frequently used. Choose no more than four such icons on any one toolbar, otherwise the effect will be diluted and the toolbar will become very wide. For example:

    Figure 5-4Toolbar with "priority text" labels beside the first few buttons only

    If you are unsure which buttons will be most frequently used, choose the first few buttons on your toolbar and provide labels for those only.

  • Ensure all toolbar controls have tooltips. The tooltip should be more descriptive than the corresponding menu item, if it has one, but still concise. For example, Create new document for the Open toolbar button. Use sentence capitalization for tooltips—see Section 8.3.2 ― Capitalization for more information.