Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

HTML Acronym Tag

The HTML <acronym> tag has been deprecated in HTML 5. Use the abbreviation element instead.

Acronym Tag Prior to HTML5

The element is shown with a dotted underline by most modern browsers. Sometimes the letters of the acronym are displayed in an all-caps rendering.

If I placed the following code in my external or embedded style sheets:

…then wherever I used the acronym tag set, the acronym enclosed between the start and end tags would be displayed in a blue text color. If a user rested their cursor on the acronym the cursor would change from the familiar arrow or text cursor to the help cursor. It might also display the dotted underline unless you take it away. Here's how:

The acronym definition is provided by the title attribute. If used, most browsers display a tooltip with the definition. If you don't include the title attribute the acronym tag won't have a browser generated visual change. Here's how to add the title attribute:

Here’s an example of how your browser displays an acronym: USA

As you can see, the tooltip is pretty plain. It doesn't accept style code directly either. There are workarounds to stylize the tooltip, but most of them are more trouble than they're worth, or they don't work consistently, or they cause conflicts. Check out this example below, though. Rest your cursor on the acronym.

I just bought a blue BONES just for fun.

It's not a super-fancy tooltip, but it is nicer looking and easier to read, in my opinion. I used an online tooltip generator to generate the code. It seems to work well and pops up faster. You'll find it here. You can also edit the CSS styles the tooltip generator creates to further cusomize the look of the tooltip.

The tooltip has a max-width, so you're limited as to how much text you can enter. Edit the max-width part of the CSS to fit in more text. It doesn't wrap as coded, so it just makes the tooltip longer. I got around that by changing this...

...to this

Note that I added text-align: left; under the white-space: wrap;, otherwise the text will all be centered, which doesn't look as nice, in my opinion.

I recommending put the CSS portion in a separate file and save it as popup.css or another relevant name, then link to it in the HEAD section of the pages where you want to use it. Then you can place the HTML portion in your page, style the acronym however you like, and have a nice popup.

One of the nice things about it, is that it doesn't use the abbreviation tag, it uses a span tag. That means you can use it in place of acronyms, abbreviations, on links, or in many other ways. Of course, you can always just use the acronym tag, too. It's easier.