4

Is there a standard style for text that opens a tool tip upon hover?
E.g. "Learn more" text where the user hovers over it and it opens a tool tip.

Someone on my team had mentioned displaying the "Learn more" with a dotted line underneath to denote its a hover tool tip, but I haven't seen that styling consistently used on text that opens a tool tip on hover.

  • 1
    A dotted underline is usually the standard style of the abbr-element. When you hover an abbreviation which is marked up with the abbr-element, the provided description appears in a tooltip. – haugsand May 27 at 15:12
  • Be careful: if the information only appears when you hover, then people who don't use a mouse can't see the information (this would include mobile users and people who have a disability that requires them to use only a keyboard, who may or may not use a screenreader). For this reason, I use a button with a popover instead. – Laurel May 28 at 1:09
4

Most applications/websites either have an icon (often a question mark) to indicate you can hover over it (but then the hover only works on the icon, not the label) or no special formatting at all. The answer here suggests using a dotted line as well; I vaguely remember old Windows (3.x) help files working the same way.

Stack Exchange has a lot of labels / links with tooltips:

  • almost all dates/timestamps (the 'asked 14 mins ago', which appears on your user card while I'm writing this, the two 'today's currently under the question title)
  • the links under each post ('share', 'edit', 'follow', etc.)
  • most cases where a number larger than 1000 isn't shown exactly, such as the number of views of a question

They do not have a common style. Perhaps if they would, users on a touchscreen device would wonder about what the common style would mean; after all, they are unable to access hovers.

| improve this answer | |
3

The only thing that could be considered a standard really is the question mark in a circle icon, as @Glorfindel mentioned. Apart from that, it's what fits well with the rest of your content and UI design. As long as people can see that something is interactive.

Can I ask you to look into making them accessible? https://inclusive-components.design/tooltips-toggletips/ https://www.sarasoueidan.com/blog/accessible-tooltips/

| improve this answer | |
  • 1
    Funnily enough I was just implementing a tooltip component today in a web app, and for the life of me I wasn't able to get half the screen readers I have to recognize it. As far as I can tell, the support for tooltips is pretty patchy. – Roddy of the Frozen Peas May 28 at 6:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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