How to render text that contains a tooltip / hover state?

Question

I'm wondering about the best way to represent text that contains a flyout / tooltip (similar to Foursquare - see image below) but is not a link to another page.

Foursquare flyout

In my case, there are a number of these text links on a given page, so having a tooltip / question-mark icon would clutter up an already clean interface. Should the text be black with a link underneath? What is a good technique for this (below is an example of the text that will contain a flyout)

Black text that requires flyout

Do they only display on hover, or on click? If it's only on hover, is there a different action when the link item is clicked? — JonW, Sep 06 '12 at 14:58
only on hover - there is nothing to click to (like another page) — squeezemylime, Sep 06 '12 at 15:53

score 2 · Answer 1 · edited Apr 13 '17 at 12:32

2

I've been having this question as well a few months back. I learned that conventionally popup/tooltip content is cued is by using a dotted underline.

enter image description here

edited Apr 13 '17 at 12:32

Community

1

answered Sep 06 '12 at 14:24

AndroidHustle

16,241
2
53
80

This is fine for abbreviations (as shown in your image) but I'm not sure it's ideal for full content areas to display via dotted underline links. – JonW Sep 06 '12 at 14:55
Ok, I can agree with that. However, if the user understands the cue (something will appear if I hover that object) and then hovers it I don't really see what the problem is. It seams a bit of a waste only having it exclusive for abbreviations, the result is in the end very similar for both cases. – AndroidHustle Sep 06 '12 at 15:23

How to render text that contains a tooltip / hover state?

1 Answers1