Disable SVG tooltips with `title { pointer-events: none }`

Part of SVG’s accessibility importance is the ability to label and describe with <title> and <desc>. The problem with <title> is that it doubles as an accessible name and a hover tooltip.

This is the problem that made early Internet Explorer and alt an accessibility disaster; authors started writing alternate text specifically for the tooltips, or avoided it altogether to prevent confusing sighted mouse-users, so I’m sad it happened again.

Later SVG specifications stated that <title> should only be used for hover text if it had role="tooltip", but this was never implemented.

It’s not perfect, but it would be an improvement if we could disable the tooltip behavior with CSS/SVG presentation attributes, to avoid breaking existing content that relies on the old behavior:

svg|title {
  pointer-events: none;
}

or

<title pointer-events="none">A yellow shining sun.</title>

Moreover, it would be nice to be able to control showing tooltips for any element regardless of whether it’s inside SVG.

This could be done with a CSS property like show-tooltip (with auto value by default, and none to disable tooltip).

Oh, that’s a much better idea! We could do things like this, then:

<button title="Publish the current document to your front page">Publish</button>

button {
  show-tooltip: none;
  position: relative;
}

button::after {
  content: attr(title);
  position: absolute;
  /* etc. */
}

…to make our own tooltips while still exposing the correct semantic attribute.

This would be fantastic. As-of now, the only way to disable tooltips is to set the title to an empty string.

What’s the next step to make this a reality?

It’s a very useful idea to be able to switch off the tooltip behaviour indeed.

I’m developer of a lightweight markup language to HTML converter and the lightweight markup language has one syntax for annotating words or runs of text. It’s usually prefered to show these annotations as tooltip and hence they are converted to title attributes on span elements in HTML. But there are situations where they are better displayed differently, e.g. as ruby annotation for east asian text. CSS already makes it possible to display the title as ruby annotation, which is great. The only aspect that is a little irritating then is that the annotation is also shown as tooltip. It would be nice to be able to switch that off with CSS.

IMO, a better model would be a tooltip version of the content property. For example: tooltip: attr(title) and tooltip: none.

This would accommodate cases like td::before { content: "ISBN"; tooltip: "International Standard Book Number"; } where the column heading has been hidden.

I’m definitely in favor of this. Hopefully a browser vendor picks this up I guess? It’s interesting… I’ve noticed that tooltip ideas/suggestions don’t seem to get much interest here.

No. Browser vendors don’t just pick up ideas from the WICG forum. The next step needs to be a proposal in the form of a WICG spec, and that requires a champion, a person who is willing to spend time on creating the initial spec—there is a starter kit*—and post it here, then process the feeback and update the spec until the group is in agreement, and only then does it make sense to file the relevant browser bugs, which is how you actually make vendors implement stuff.

* I wanted to test it but couldn’t because my Node version isn’t supported (updating Node on Windows is a major task; you basically have to re-install everything ). It needs at least v7.5, I think.