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.

4
  • 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? May 22, 2018 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
    May 23, 2018 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. May 23, 2018 at 10:31
  • yada-yada-sticky
    – Rob
    May 24, 2018 at 12:15

4 Answers 4

2

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

4
  • 1
    That might be right, but I think that popover occurs only when you click something (so it pops up).
    – Alex
    May 23, 2018 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, 2018 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
    May 29, 2018 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, 2018 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)

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.

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.

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.