Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have a sentence in which one word has a tooltip. The data in the tooltip is supplemental and putting it into the main UI isn't required.

However, how can I mark the word to notify the user that it has a tooltip? I've tried marking the word with an underline and blue color, but it looks too much like a link (which it isn't).

Below is the image of what it looks like now:

Text with tooltip

Thanks!

share|improve this question

5 Answers 5

up vote 5 down vote accepted

A technique I use alot is to list out as many possibilities I could think of and then see which one pops out. I think the third one below is better than the others for me. Maybe a different icon, maybe a little smaller, but you get the point.

Tooltips

share|improve this answer
1  
If you do decide that tool tip is the way to go, I would shoot for something like the icon in line three here, except use an 'i' instead of a '?' –  Matt Lavoie Aug 23 '11 at 16:57
    
definitely. I just grabbed the first icon in the ballpark from google. :) –  Glen Lipka Aug 23 '11 at 17:24
    
I think using a different visual indicator than an underline is probably the best way to go. To add to the above answer, I would like to suggest the use of tiny arrowheads on the bottom or top right of the word. The arrowhead method can be used with the method of highlighting the word or by itself. If used with the highlight or a color change method it gives the user an idea that clicking on the whole button activates the tooltip instead of on an icon in one corner. –  Viraj Mar 6 '12 at 19:04

The best way to go in my opinion is to use a little questionmark-icon before or after it. This is generally known as "help" also set the pointer in css so when hovering the "hand" does not appear

share|improve this answer

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

You don't want to make it blue that's for sure, but you can try leaving it black (or whatever the normal color is) with an underline. Links are so commonly not the same color as the surrounding text that the appearance of underlined normal color text may be differential enough, but you can also futher differentiate by double underlining.

If you have a lot of such words on a page, you might want to consider making the color of the underline itself a fainter shade of gray in order not to overly degrade the readability.

Ensure that tooltips come up quickly on hover so that they can be discovered easily, but not so quickly that moving the mouse around the page results in lots of flashing tooltips.

I have to say though, that I'm not convinced of the need to hide the information behind a tooltip in the first place, as it would be quite easy to quote the tooltip in the original paragraph or to give your popup (in the image above) a suitable footer line or some other better way of laying out the whole popup. In particular, if the popup is obscuring the expression itself, then you don't need to use tooltips in your paragraph at all, but you should relocate the popup a bit, but perhaps with a pointer to the expression (speech bubble style).

share|improve this answer
4  
Double underline is often seen on terrible websites to bring up "tool tip advertisements." I would avoid the double underline because of that association. I personally will keep my mouse from touching anything with a double underline for fear of some ad popping up. –  Matt Lavoie Aug 23 '11 at 16:56
1  
@matt yes that association did come to mind. I loathe it - but nevertheless, it is a common indicator of tooltips/popups - just often not a positive association for this very reason. –  Roger Attrill Aug 23 '11 at 17:03

I'd have to argue against the entire popup. You're apparently obscuring the primary content that the user is trying to use, and then you compound the problem with a tooltip over the popup.

If you feel the need to provide tutorial content, don't do so in a manner that obscures the user's view of the work field. Arrange your UI elements in a manner that offers a single location for alerts and notifications, and route everything you've put into popups and tooltips into that area.

share|improve this answer

The best practice for showing that a word within text has a tooltip, is by using a dotted underline for the text decoration. It is the first example in the list created by Glen.

Though normally this is used with the tag for showing abbreviations and acronyms, it would work fine in a definition case as well. Here is a good discussion about this on AListApart

http://www.alistapart.com/articles/hattrick/

share|improve this answer

Your Answer

 
discard

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.