Axure Tutorial: Displaying Omitted Text in Repeater with Bubble Widget


In the system table, we often encounter that the content in some grids is very long. If all the contents are displayed, we will not be able to see the contents of other columns on one page. In this case, we often only display the front part of the long content. If the mouse moves in, we will display all the contents.

The advantage of this is that one can read the complete content in the table at a glance, and the other is that if you want to view the detailed long content, you can also view it by moving the mouse in.

So today I will teach you how to use repeaters and bubble widget to implement this prototype template that displays specific text content.

Features to be Realized

  1. Import text in the repeater table, and automatically display the text content on the corresponding widget.
  2. If the text is longer, only the content of the front part is displayed, and the latter part is automatically replaced with an ellipsis.
  3. When the mouse moves into the long content, corresponding complete text content is displayed. .

Widgets Setup

1. Making of table header

The production of the header is relatively simple, we can make it with a rectangle, and the style of the rectangle can be adjusted according to the needs and preferences. We use as many rectangles as there are columns, as shown in the image below.


2. Making of table contents

To make table content, we mainly use repeaters and rectangles. We put the corresponding rectangle in the repeater, where the rectangle and the width of each rectangle in the header above should be in one-to-one correspondence.

After adding widgets, we add columns to the repeater table:



3. Making of bubble

Go to the repeater canvas, drag a rectangle into it, change rectangle shape to bubble, and set its style.

Interactions Setup 

When the mouse moves into the content cell of ​​the table, the bubble is shown, and when mouse moves out, the bubble is hidden.

Then set the content of the bubble as the data of the corresponding column of the repeater.

Finally, intercept the contents of the repeater table cell text to no more than 50 characters. We need to add substr function to the cell text. 

When the text length of the table cell exceeds 50, the text is intercepted as 0 to 50 + "..."


In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

If you like the article, please share it with others with page link, thanks for your supporting!

Well Joe @AxureBoutique, a technology writer and teacher, focuses on Axure prototype design and product design.


Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

This section doesn’t currently include any content. Add content to this section using the sidebar.