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


7 Answers 7


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.


  • 2
    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 '?' Commented Aug 23, 2011 at 16:57
  • definitely. I just grabbed the first icon in the ballpark from google. :)
    – Glen Lipka
    Commented Aug 23, 2011 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
    Commented Mar 6, 2012 at 19:04

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).

  • 5
    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. Commented Aug 23, 2011 at 16:56
  • 2
    @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. Commented Aug 23, 2011 at 17:03

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



I also faced this issue, because my users did not understand that a green solid underline could trigger a tooltip.

So I did different versions and I am certain that the last one is the best indicator:

Tooltip indicator - best practice webdesign


  1. Underline the text with dots (dotted like abbr in HTML).
  2. Add an info icon to make clear that there is an information behind (probably an info icon is preferred over a question mark icon).
  3. Position the info icon close to the word, not underlined.

Another argument for using the dotted underline is that the HTML5 element <abbr> is rendered this way in some browsers.

  • That's a good point!
    – Avatar
    Commented Oct 26, 2019 at 15:25

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


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.

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.