Show widget based on CSS text-overflow with ellipsis

advanced-prototyping

#1

Hi.

I have a repeater where text content is shortened with ellipsis ("…") if the column width is too small. This is done in Jacascript using Open External Link, and works fine.

Now, I want to show the full text content in a tooltip that appears on mouseover, but ONLY when text has been shortened by ellipsis.

I’ve tried a little using Javascript (don’t think “ellipsis” is suppported natively in Axure RP9, but would love if it was), but I’m having trouble detecting whether a text has been shortened or not. My approach has been to run the Javascript code on Mouseover, and simply set a global variable ShowTooltip (based on the ellipsis detection, which I can’t get to work), and use that in the Move event on the same item (so that I am sure that the Javascript runs first).

Does anyone have any proposal on Javascript code I can use in Open External Link to detect if a text has been shortened by ellipsis with the CSS-rule text-overflow?

Thanks.

Asbjørn


#2

Does it need to be a JavaScript solution? Would using native Axure logic work? Something like:

OnMouseEnter, if text on This, contains "...", then show, Tooltip, treat as flyout


#3

No, it doesn’t have to be a JavaScript solution. But I don’t think it is possible in any other way; the ellipsis is not three dots, but a separate “thing” (not really sure what it is) created by the browser during runtime based on CSS-rules.

The proposed solution would work if I also created the ellipsis as three dots in Axure (based on string length, for example), but it is both easier and visually more elegant to just define the CSS-rule–except from the reverse detection, of course.


#4

So I have something I think might work: Detect_Truncation.rp (57.4 KB)

The theory behind it came from this Stack Overflow thread: https://stackoverflow.com/questions/7738117/html-text-overflow-ellipsis-detection

It basically breaks down to taking the width of the span element the text is in and comparing it to the width of the parent div. If the span is wider, we assume the text is truncated. You’ll have to add or subtract from the width threshold to allow for the size of the ellipsis. (Hopefully the example makes this more clear.)

To identify a specific widget inside the repeater, I had to piece together its element id using the parent repeater’s id, the row [[Item.index]] , and just inspecting the generated HTML code. Once I had that, I used it to grab the span width and put it into an Axure global variable. After that I just used an Axure condition to compare the widget width to the global variable; if wider, show the tooltip.


#5

Thanks, @huban. Your example works fine, and is easy to understand.

For my prototype, detecting/setting the text element’s ID is a bit more complex, as it is placed within a dynamic panel in the repeater. I’ve inspected the HTML code, and the text element’s ID seems detached from both the ID of the repeater and the dynamic panel. So, I had to manually put in the ID for each element (yes, there are more than one that may have ellipsis and corresponding tooltip). After fixing a couple of typos, your approach works fine.

Thanks again, @huban!