I have a question about using different styles for tooltips in the same system. We're creating a new platform so the styles are not all the way defined, talking to the front end developer he insists all the tooltips should have the same style (So they all need to have same colors and same text structure).

I on the other side think that Label tooltips (so the ones that specify only the label for an icon) should have a different style than the Informational Tooltips that have more documentation to educate the user, since both of them play a different role on the experience and therefore the user interacts different with it.

But at the same I'm divided, there are many platforms that use different styles (Stackexchange i.e.) but there are many other that don't (slack i.e.)

what do you guys think?enter image description here

  • 1
    Why is it you think they play a different role? In both instances, the user hovers over something because they wan't more information about it. Just because one typically have more information than the other, it doesn't making it a different role. My vote would be to keep them the same style. (p.s. personally I don't think SE user hover should be dark, I would have chosen to keep it light like the rest)
    – musefan
    Commented Aug 6, 2020 at 7:38
  • We decided to go with the dark background since it gives better contrast therefore is easier to read.
    – Roxana
    Commented Sep 15, 2020 at 20:32
  • might as well post that as an answer explaining your reasons. Might be useful to other readers
    – musefan
    Commented Sep 15, 2020 at 20:37

1 Answer 1


Consistency comes up as a frequent topic of discussion in design and implementation of the user interface. However, most people only consider the visual styling of the interface components but fail to take into account of the behavioural aspects that is often determined by the context.

In this instance, the different stylings has been defined based on the expected amount of information that needs to be displayed to the user on a hover-over action. I don't see any clear call-to-action (e.g. an information icon) to suggest that this can be triggered, and perhaps it is by default something that happens in this context (e.g. a data table). We can also see that the tooltip can be triggered against a different background colour, and therefore accessibility considerations might also come into play.

To help reduce the complexity of the design and implementation challenge as the system and interface complexity/variation increases, you should keep in mind to keep the design and interactions as simple as possible. In this case I would review the existing design patterns and style for user triggered informational prompts and see if it can be simplified or not to help make things more consistent in the future.

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.