8

I've got a table like web page and on only one column you can hover over the rows and tooltips appear. At the top of the column I've got a little info symbol ('i' in a blue circle) but I don't think it's intuitive enough. What is a decent way to indicate that tooltips are possible?

Improve this question

4 Answers 4

Reset to default
4

A tooltip is a helpful thing, but should not be used to display information that might be essential. If the information is additional rather than essential I believe your approach is pretty decent.

Let's have a look at someone else who did it exactly like you did:

enter image description here

This is taken from the Audi website, where you can choose and configure you car. Some options such as some types of mirrors need further explanation in case you don't understand the difference and have the little "i" icon next to them, as shown on the picture above. The user can hover on the i icon and then gets to see additional information:

enter image description here

Improve this answer
3
  • 3
    The key to the Audi site working is that there is an "i" button everywhere a tooltip is needed. I believe the original design of a tooltip indicator just at the top of the column is insufficient. You need some visual cue of where to put the mouse!
    – Drew Beck
    Feb 20, 2014 at 9:23
  • Indeed, the i icon would have to be repeated for every single row where a tooltip exists.
    – Bart Gijssens
    Feb 20, 2014 at 9:25
  • Do you guys think that having the "i" on every row almost decreases it's prominence and effectiveness as a tool tip? You could be more obvious and have an underlined link explaining exactly what the tool tip is. Such as "more features" or "more information" - making this individual for each one. Based on cognitive learning, one a user rolls over 2 rows with the tool tip appearing, the user will know to rollover the rest of the rows in future to get that tooltip.
    – DLM
    Feb 20, 2014 at 10:33
8

I'm a fan of using a dashed underline to indicate a tooltip. I could see where it may be too clunky-looking in a table, though.

Improve this answer
4
  • 1
    I'm also a fan of this as it's the same behavior as the native abbr functionality in HTML
    – Kavi Siegel
    Jun 12, 2015 at 23:01
  • does the dashed line always stay, or does it show up on hover along with the tooltip?
    – harshikerfuffle
    May 7, 2020 at 16:19
  • @harshikerfuffle it always stays
    – Marcie Kaiser
    May 8, 2020 at 17:07
  • interesting, I saw this pattern in the carbon design system as well, it is called a 'definition tooltip'
    – harshikerfuffle
    May 8, 2020 at 18:53
2

You could change the color or style(italics, underlined, shadowed,..) of particular line for which you want to show tooltip.

Follow that style uniformly across all text/object in your site which has tooltip.

enter image description here

Improve this answer
2
  • Not good. When you position your mouse over the site and start to scroll, tooltips show up where they shouldn't.
    – uxfelix
    Feb 20, 2014 at 10:19
  • Yeh, In that snapshot, cursor is missed out. I too try making out that point only.
    – Venkatesh K
    Feb 20, 2014 at 10:27
2

Some days ago I've registered at slack.com. And they've implemented rather interesting solution.

At first users see animated visual cues which pop out due to animation - it's hard to skip them: enter image description here

And after click on the cue an user sees the information box: enter image description here

Improve this answer
2
  • interesting solution!
    – strudelkopf
    Feb 20, 2014 at 10:32
  • this is not a tooltip per se. It is first run experience which looks like a tooltip purely because of the visual treatment.
    – harshikerfuffle
    May 7, 2020 at 16:20

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.