Force/prevent device tooltips with CSS

Originally proposed by @MT

Use Cases

1. Force mobile devices to display native tooltips for content, instead of elements like `` just plain not working at all. ```css abbr[title] { show-tooltip: always; } ```

   This has advantages as a native solution, so the web page needn’t recreate complex visibility logic. (“Does the entire tooltip fit on the screen?” is a question most tooltip libraries struggle with, and a pure CSS solution can’t do it at all.)

2. Implementing custom tooltips, so you can use `title` semantically and as a fallback, without having the dreaded double-tooltip. (GitHub's style guide currently uses `aria-label` for exactly this purpose, which has problems.)

   <button>
     <img src="help.png" alt="Help"
          title="This form allows JPEG and PNG uploads." />
   </button>
   

   .help-sign {
     show-tooltip: never;
     position: relative;
   }
   
   .help-sign:hover::before,
   .help-sign:focus::before {
     content: attr(title);
     display: block;
     position: absolute;
     left: 50%;
     /* etc. */
   }
   

3. Suppressing unwanted tooltips when using SVG's `` element for accessible names.

   <svg>
     <title>A bar chart showing buzzwords increasing over the past year.</title>
     <!-- ... -->
   </svg>
   

   svg|title { show-tooltip: never; }
   

Syntax

The property show-tooltip takes the values always, never, and auto (for overriding back to normal behavior).

I like the idea in general (as I’ve briefly proposed it myself earlier in a comment here at WICG).

I’m not sure about exact keywords for value though. It probably makes sense to use show and none (or hide) which are more consistent with existing CSS keywords (none is used widely (e.g. display: none); show / hide are used e.g. in the empty-cells property).

Also, the property could probably be named just tooltip instead of show-tooltip.

Ah, I should have known I originally got it from you. Linked in the original post.

I took the always and never values from some experimental specs I’ve seen floating around, but yours are simpler and shorter. Seems better to me.