Adding webpage depth

2023-09-27 — Jahan Rashidi

One of my favorite things to do on this digital garden is to add some text that pops up when you hover over the text. It's not much, but I love doing it to add a bit of extra spice to otherwise bland (or even to flavorable) pieces.

How do I do this?

Well I'm glad you asked, non-existent person. Placing a title attribute on any HTML element will (in at least every browser I know of) cause the text set to the title attribute when said element is hovered over by the mouse. To section off specific parts of text, I wrap them in a <span> element. For example,

<p>Once I <span title="2025/03/26">rise to power</span>, rain dances shall be manditory</p>

Would render as

Once I rise to power, rain dances shall be manditory

Pretty nice, huh?

Why should I do this?

  1. Adds depth
  2. It's a fun easter egg for visitors
  3. Can provide context to things. This is especially relevant to links, as it's nice to know what something is before you go to it.
  4. Spites mobile users (may be a downside, but c'est la vie) Can also be shown on mobile, with the help of the content attribute.

Making it visible on mobile/printing

Title attributes aren't viewable when on mobile nor when printing a page, but they can be displayed as normal text using the content attribute with pure CSS. Here's an example of that:

[title]:after {
 content: ' [' attr(title) ']';
}

And this can be put inside of a media query to make it show when printing or when on mobile. To explain the snippet a bit more, [title] selects all elements with a title attribute, :after means it adds it after the content of the attribute, and content: sets the content (so in conjunction with :after, appends content). ' [' attr(title) ']' will create a string of [titleattribute].

Indicating existence

To make it more clear that certain parts of text are hoverable, I apply special styles to them. To do this, you just need to use the CSS attribute selector, []. For example,

[title] {
 cursor: help;
}

Will cause all elements with a title attribute to change the mouse cursor to the help cursor (little question mark next to it) when the mouse goes above it. This is useful for indication as with many browsers it takes a second or two for the text to pop up after hovering over text.