Proposal: Native solution for tooltips on the web platform

[victornpb]

I was discussing with someone how every website on the planet uses some kind of tooltip to display hints or additional information about an element. There are tons of libraries that implements tooltips, but even the most famous ones doesn't seem to implement it right, there are just no straightforward and elegant way of implementing them. Even though this is such a simple use case that I feel that I don't need to justify the what problem it solves.

I posted a tweet about it and a few people manifested interest 1, 2, 3, 4, 5, 6 in discussing possible solutions, which kinda encouraged me to start this discussion here.

I'm going to enumerate things that comes to mind when implementing tooltips that are challenging:

• Hovering often involves, creating multiple mouseover events, or forcing you to use a global event and inspecting target and its parents.

• Making tooltips vanish requires you to have a global event mousemove or rely on the buggy mouseleave event.

• Positioning, this is a very tricky one, try to implement a tooltip that is displayed correctly centered on the parent element and within the viewport correctly. Bootstrap 4 relies on a "Positioning engine" https://github.com/FezVrasta/popper.js

• Scrolling often breaks things, is tooltip scrolling out of the view port? is it inside a scrollable div? is there enough space above it on the viewport but the parent have overflow:hidden, so you are forced to position it outside the container and get the rect position? I've seen libraries, updating all tooltips on the page where they must appear on every scroll event or window resize, causing scroll jank.

• Accessibility implications, tooltips are often used as the only text description on icon only buttons, using these frameworks we lose semantics. Aria attributes are just useful for assistive browsing but, for normal browsing it is left to be desired.

• Tooltips are just fancy [title] attributes.

• I'm aware that title for hints are deprecated, they don't play well with devices with touch or other kind of non traditional mouse devices, but every UI including outside the web platform relies on some sort of hint/tooltip, I don't see the need for this UI element disappearing, and we don't have a low cost way of doing it on the web.

---

NOTE: I'm not assuming this will in fact be added to html, this maybe in fact branch off to a lower level API that maybe keep this in userland and just lift some weight off those libraries. I quote Alex here.

[GrosSacASac]

Link to relevant stack overflow question,
The problems:

• title cannot be styled, it has no css selector
• because it cannot be styled, to avoid displaying a tooltip twice, use a custom class or data-title
• those are non standard, so harder for screen readers to see
• title cannot contain anything other than text
• to display something rich (html markup based) css has to be used to display it http://jsfiddle.net/prasun_sultania/KSk42/
• the static display above, or below is not so good when the view changes (scrolling)
• to take into account the scrolling position, js has to be used with mouse enter/mouse leave
• because js has to be used, it contributes to web obesity +(1 to 10)KB

In my opinion the solution should include way to include any markup in the tooltip, have graceful degradation, be targetable by css selector, have good default to display in the viewport all the time

[Malvoz]

Element-relative positioning is discussed in https://discourse.wicg.io/t/position-an-element-relatively-to-another-element-from-anywhere-in-the-dom/968 which may be a piece of this puzzle.

[victornpb]

@Malvoz I like the idea of something like that, it is like something absolutely positioned but relative to another element.

It doesn't solve the problems like having some form of control wether it should be appear above if there's space available above or place below if it goes off the viewport.

Also even tho I agree with the web manifesto about low level api's I feel that this is something that you should be able to have without javascript, or at least some basic functionality. So for that it should be able to trigger it, not just position it correctly.

[domenic]

Thanks for opening this issue. I apologize for not responding sooner; as a complicated topic and longer post, it's always easier to say I'll get to it tomorrow. Let me try to tackle this a bit.

Hovering often involves, creating multiple mouseover events, or forcing you to use a global event and inspecting target and its parents.

Making tooltips vanish requires you to have a global event mousemove or rely on the buggy mouseleave event.

I'm unsure what to make of these. Are there bugs in existing evergreen browsers that we need to fix? Any new thing we added to the standard would only be deployed in such browsers, so we can't assume a new feature will solve a problem with old browsers.

Assuming evergreen browsers with bugs fixed, what is wrong with using a global event? Perhaps a code example would help. Is it just that getting the exact pattern right is doable, but difficult? If so, I'm definitely interested in exploring whether we could provide a more ergonomic API to make it easier.

Positioning

This seems like a clear case of something that is doable today, but stupid-difficult. I'd love to provide some sort of helper in the platform that tells you where to position things.

Scrolling often breaks things

I'd sum this bullet point up as "getting tooltips to react well to changing circumstances", including users scrolling, tooltip content changing, viewport resizing, .... I am hopeful this could be done these days with IntersectionObserver.

Accessibility implications, tooltips are often used as the only text description on icon only buttons, using these frameworks we lose semantics. Aria attributes are just useful for assistive browsing but, for normal browsing it is left to be desired.

I'm unsure what you're getting at here. You title this "accessibility implications", but then you talk about "normal browsing" outside of browsing using accessibility technology.

Tooltips are just fancy [title] attributes.

I'd rather say that [title] is a very simplfied tooltip.

I'm aware that title for hints are deprecated, they don't play well with devices with touch or other kind of non traditional mouse devices, but every UI including outside the web platform relies on some sort of hint/tooltip, I don't see the need for this UI element disappearing, and we don't have a low cost way of doing it on the web.

Citation needed for every UI including outside of the web platform. I don't know of any tooltip usage on iOS, and I have seen some stuff on Android (press-and-hold) but only sometimes. Given that mobile web browsing outweighs desktop web browsing, and is growing whereas desktop web browsing is not (citation needed, I realize), it is indeed hard to prioritize desktop-first patterns like tooltips. I personally am interested; it might be hard to motivate browser engine teams though, including my own.

[muan]

Just want to add that the frontend team at GitHub also cares about this.

Exposing primitives for tooltips would be great, but since we are still talking about combining some, if not all, of the following: top layer(stacking context), IntersectionObserver, listening on mouseover/focus, potentially a CSS positioning API, something that deals with wrapping and overflow, and exposing the tooltip to the AT appropriately (as name? or description? on a focusable element)– having a native, easy-to-use, performant, and accessible solution would make a big difference and save developers a lot of work.

---

Given that mobile web browsing outweighs desktop web browsing, and is growing whereas desktop web browsing is not (citation needed, I realize), it is indeed hard to prioritize desktop-first patterns like tooltips.

This is a good point. I do see websites moving away from tooltips as they move towards mobile-first designs. Us too.

[noamr]

Given that mobile web browsing outweighs desktop web browsing, and is growing whereas desktop web browsing is not (citation needed, I realize), it is indeed hard to prioritize desktop-first patterns like tooltips.

This is a good point. I do see websites moving away from tooltips as they move towards mobile-first designs. Us too.

Tooltips as a concept is not inherently desktop-only, rather it has a different design on mobile. For example, showing the tooltip at the bottom of the screen.

If tooltips could be achieved with a dedicated element or pure CSS, this could be made possible with media-queries. I think that the main next step for it is the top layer research: #4633

[Malvoz]

There is a discussion for popups on hover, which is one characteristic associated with tooltips. (Just noting the potential overlap.)