2

I am trying to create a style guide and have two types of tooltips and am having a hard time finding a semantic naming for them.

Type 1 - Stays if you hover over the tooltip, so that you can include links. This type is to include information or explanation on features (About 1 or 2 paragraph). Example

Type 2 - Disappears as soon as you hover out of the help icon. This type if generally to include quick short information (a few words). Example

Do you have any ideas? I don't seem to be able to find it even referencing Bootstrap or Material Design.

  • I'm struggling to see the difference between the two types? They both show something when you hover over and disappear when off focus. Can you try to explain the difference a bit better? – RobbyReindeer May 22 '18 at 8:17
  • 1
    My apologies. I refer specifically to Facebook Analytics Demo Type 1 is used specifically to explain features (so longer, richer) - Example gyazo.com/61143be8702c56081a7cd35aa1dbc3d6 Type 2 is used to provide hints on what you are about to click or full value of abbreviations. Example gyazo.com/7454427fb4870784c7c698aba6e1e740 – Alex K May 23 '18 at 9:33
  • 1
    Great, you should edit to include these examples into your original question, so that others don't have the same confusion. – RobbyReindeer May 23 '18 at 10:31
  • yada-yada-sticky – Rob May 24 '18 at 12:15
2

Bootstrap calls them Popovers: https://getbootstrap.com/docs/4.0/components/popovers/

| improve this answer | |
  • 1
    That might be right, but I think that popover occurs only when you click something (so it pops up). – Alex K May 23 '18 at 9:30
  • If you refer to bootstrap specifically, according to the documentation you can change the trigger to one of these click | hover | focus | manual – Tim Schoch May 25 '18 at 9:00
  • That make sense. We have another component that pop up after you click on something to show a menu, which we call popover. So I guess maybe we should differentiate it with its triggers and use. Like Popover - Tooltip on Click – Alex K May 29 '18 at 4:18
  • In the design system I'm currently working on I do the same as bootstrap: the component name is determined by its appeareance (speack HTML and CSS) and it's interactions, the trigger is usually just an option the designer can specify. But I've worked on projects where they separated the componentens just like you suggest. – Tim Schoch Jun 1 '18 at 9:17
2

Material-UI call them interactive tooltips: https://material-ui.com/components/tooltips/#interactive

(I would post it as a comment, but I don't have enough points)

| improve this answer | |
0

Why not make them the same component and add a delay when hiding them. So when you hover the thing that brings the tooltip up, when hovering out you delay hiding the tooltip by, say 0.5 seconds. If in that time the user moved the cursor to be on the tooltip, you keep it open, allowing them to click the link.

Possibly the delay can be even shorter, see what works.

| improve this answer | |
0

It seems you're describing different behaviors of tooltips, not different types of components. Why not differentiate them as such. You would probably want to define what the preferred default tooltip behavior is and differentiate the other behavior as an option.

| improve this answer | |

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.