Featherweb Blog

Alternative for title/tooltip

Today, I've read some articles, that utterly condemn the use of titles in a web page. Not the "title" ( <title></title ) that normally lives in the 'head' section and becomes visible in the browser tab. The other one, the tooltip-title, most often used in anchors.

What makes the authors of these articles furious is that those titles most often contribute nothing to the content. The classical worst case example is Google. If you are reading this on a mobile or other touch-screen device, you're not able to see this title. It only appears when the mouse pointer hovers over the 'Google' link. But you cannot hover on a touch-screen and you have no mouse anyway... ( The 'Google' title was 'Google')

I must confess, until yesterday, I quite liked using tooltip-titles. Knowing now, however, that none of the mobile and touch-screen users can actually read a title, it was not hard to decide to replace them with something everybody could see/read.

At first, I was attracted to offering a modal, because I hadn't made one in a long time and, they can be very elegant. I had to read up a little on modals and, from where I look nowadays, the conclusion was easy: no way I want to add all that code on top of my site. Looking further I found a perfect solution; the HTML <details> element, combined with <summary>

A first example: I replaced the title that shares the info about the image on top with the "details" solution. See the small text "image" just below the image. Simple, unobtrusive, reliable and respecting everybody.

Added bonus: it is now possible to include clickable links in the text. That was not possible in a title.

Let's test 😀

[Edit: the next day]

1. I forgot to show the code example for the "details/summary" html:

<details>
  <summary><small>Image</small></summary>
  <p>Image by <a href="https://pixabay.com/photos/soap-bubble-cloud-heaven-weightless-3758801/">Pixel2013 @ Pixabay</a>
</details>

2. I'm beginning to think size will need to be bigger for smart phones, to make 'clicking' easier.