Ellipsis

Ellipses are used to give users additional information that has been truncated in order to save real estate in tight spaces.

Overview

In most cases, the ellipsis indicates the omission of long words in data cells. An ellipsis appears when the cursor is positioned over truncated text in a graphical interface. The user hovers over or clicks on the truncated text and a small “Ellipsis Dialog Box” with additional information about the item will appear.

The ellipsis uses the Tooltip design as well as its functionality and is configured to ensure consistency across all USAC products.

Design and Layout

Interaction

Only one ellipsis pop-up should be visible at any given time. When one pop-up is visible and another ellipsis is engaged (hover), the former will automatically close without additional action by the user.

The ellipsis comes in two sizes: Large and Small. This is to accommodate two column widths — one for a large column and one for a small column space.

Large Ellipsis Column

Ellipsis has two stages: pending and active.

  • Pending stage is represented by the text truncated at the 27th character including a series of three dots.
  • Active stage is represented by the “Ellipsis Dialog Box” which contains the entirety of the text.
top dialog box

Small Ellipsis Column

Ellipsis has two stages: pending and active.

  • Pending stage is represented by the text truncated at the 17th character including a series of three dots.
  • Active stage is represented by the “Ellipsis Dialog Box” which contains the entirety of the text.
top dialog box

Placement

Place the Ellipsis Dialog Box above text whenever possible. When Ellipsis Top does not fit or distracts from the user's ability to read information on the page, choose one of the following in prioritized order:

1. Ellipsis Dialog Box Top (Default)

  • Set the position="top" and toolTipId="def-elli"
Ellipsis Top Default

2. Ellipsis Dialog Box Bottom

  • Set the position="bottom" and toolTipId="bott-elli"
Ellipsis Top Default

3. Ellipsis Dialog Box Right

  • Set the position="right" and toolTipId="right-elli"
Ellipsis Top Default

4. Ellipsis Dialog Box Left

  • Set the position="left" and toolTipId="left-elli"
Ellipsis Top Default

Dos and Don'ts

Do
  • Do use in a complex data table cell the text is too long and the space is tight.
  • Do use when there is a long number, email, or one word which can't be abbreviated.
Don't
  • Don't use in long paragraphs.
  • Don't use when dollar amounts are present.
  • Don't use for Date and Timestamps.
  • Don't use for Date and Timestamps.

Accessibility

For screen readers and touch devices, always allow users the option to click to open the ellipsis as well as hover.

Installation

Props

Slots