Enhancing ABBR


ABBR Tags

Abbreviation is what makes the world go 'round. We're always abbreviating something to get our ideas across faster, but at the same time we risk losing what our message to somebody who isn't as familiar with the subject matter. This is where <abbr> tags come into place.

The concept of an abbreviation is simple: instead of saying the full word, you're cutting it down into letters. To do this with the <abbr> tag, simply put the letters inside the tags and use the title attribute to say what the full word is. By default, browsers add a little underline to the <abbr> tag so users know it's something worth noticing.

It's a pretty simple tag, but it's also kind of boring - and a little ugly! Let's spice it up a little!

Enhancing ABBR

We're going to start by using CSS's pseudo-elements. We'll style one of these to appear when the element is hovered over with the title of the <abbr> tag. Let's get started:

That looks kind of odd, so let's style it a bit better:

That looks good, but those bubbles will be on top of any text above it. Let's hide them until the user hovers over them, or focuses on them with a keyboard.

Unfortunately, the ugly default tooltip also shows up if we over it. That's caused by the title attribute. We could use our own custom attribute, but if we're using WordPress to add these in, it'll be a lot of work to change all the titles to something, say, data-title. Thankfully, we can do this with JavaScript:

That ugly line below the <abbr> tag is gone too. Because it no longer has a title, the browser doesn't style it any differently. You can style <abbr> tag if you want too, if you want to draw the user's attention to it:

Granted, <abbr> is one of the least used HTML tags out there, but that doesn't mean you can't have a little fun with it!

 

 

Sign-up for inside tips for making
your website more beautiful!

* indicates required

Close

Sign-up for inside tips for making
your website more beautiful!

* indicates required

Close