Mobile Tooltip

So You Wanna Long Press Your Tooltips but You Don't Want to Select the Text?

What's this about, eh?

If you use tooltips, on a mobile device you need to long press to see the tip. But if you long press, your device probably tries to helpfully select the text for you so you can copy it. Maybe you don't want it to do that, but you'd rather see the tip?   No problem (for the browser's I've tested so far)! Check this out on your mobile device and long press the underlined text at the end:   I'm a mobile page with some random text   Is that what you wanted? If so, you, too, can disable text selection with a little CSS snippet:  
.user-css .tooltipster {
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
  Now you CAN'T select the text of any tooltip, so you won't be prompted to when you long press, and you'll see the tooltip.   Yay.   HOWEVER! There is a proviso: URLs are still rendered as links, so browser behavior takes over when you long press. The moral of this story: Don't rely on this tooltip trick if the tooltip is in a URL block.  

Only on Mobile?

"Wait!" (I hear you say) "I don't want that to happen on the desktop."   OK, then you need to tell your CSS about it, don't complain to me!
NB: You can't copy the above because it's a picture. It's a picture 'cause it's kinda sorta like code which is not permitted in an article. So you will have to type it out, I'm sorry to say.

Cover image: by James Wainscoat


Please Login in order to comment!