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 6, 2012 at 14:58
  • only on hover - there is nothing to click to (like another page) Sep 6, 2012 at 15:53

1 Answer 1


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

  • 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, 2012 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. Sep 6, 2012 at 15:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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