indexcode

Hover Text on Mobile Sites

Updated 23:23 on 7/15/2023

Hover text?

Hover text, otherwise known as "title text", is text that appears when your mouse hovers over any HTML element with the "title" attribute having a value. If you're on desktop right now, you can hover over the heading for this section to see an example. However, the reason you can't on mobile is what I want to talk about today.

What even is a cursor, really?

On a desktop machine, a mouse is easily enough described. It's an object with an x and y position, and you can move it using a real life mouse plugged into the computer. If you have 2 mice plugged into the computer, they both manipulate the one pointer on the screen. Easy enough, right

On mobile, though, there is no "mouse". There's multiple touch interfaces, that get created and destroyed when you touch the screen. If you don't believe me, though I don't know why you wouldn't, you can turn on "Show Touch Points" in the developer settings of any Android phone.

Okay, but what about the hover text?

So; hover text only activates when you rest your mouse pointer on an HTML element. However, touch interfaces don't have "hover" modes. Holding down your finger is used for selecting text or right clicking various elements. So, how does hover text work on mobile?

It doesn't!

You may be familiar with xkcd, a webcomic with extensive use of title text. On mobile, you can hold on the image and get the title text; why doesn't this work for other title text?

Well, it doesn't work because.. of a good reason, probably! I haven't been able to find any information on why this doesn't work. It's honestly quite annoying, because I like title text for hidden bonus information. If you're ever browsing my site, keep an eye out!

Thank you for reading.