1

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

Improve this question
2
  • 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)
    – squeezemylime
    Sep 6, 2012 at 15:53

1 Answer 1

Reset to default
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

Improve this answer
2
  • 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.
    – AndroidHustle
    Sep 6, 2012 at 15:23

Your Answer

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

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