User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

share|improve this question
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 6 '12 at 14:58
only on hover - there is nothing to click to (like another page) – squeezemylime Sep 6 '12 at 15:53

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

share|improve this answer
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 6 '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 6 '12 at 15:23

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.