Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal
Definition Element
The definition tag is used to offer a definition of a word or term that might be unfamiliar to your audience. Most browsers currently display the text within a definition tag in italic type, but the display properties can always be changed with CSS.
An example of usage is below. Rest your cursor on the italicized word.
The nebulae images taken by the Hubble Space Telescope are mysterious and beautiful.
The tooltip that pops up is added by including a title attribute and value in the opening definition tag. Here's how:
Just adding the title to the definition tag won't inform many viewers that there’s anything special about the word defined word. Many will assume that’s only for emphasis. That's where adding a little CSS formatting to it can help.
We can make it visually unique so that a viewer may be tempted to place their cursor on it to see if it does anything. Most experienced internet users will know this, but less savvy users may not. You could provide an explanation, or just let those that find it, find it; and those that don’t, don’t.
Whatever you decide, here’s one example of how CSS can be used to change the physical appearance of the text inside a definition tag set:
If that line of code were added to your external style sheet or embedded style rules, each time you used the definition tag the text within the tag set would be underlined with a dashed blue line. You could use it to explain words like You could use it to explain words like phrontistery.
A Better Looking Tooltip
You saw how the tooltip works. It's pretty simple, but not very pretty. You can dress up the tooltip using workarounds, but the element itself doesn't accept direct CSS coding. Most of the workarounds I've seen either don't work as expected or they cause conflicts. Take a look at the definition below, though.Rest your cursor on this Nogustram Nigglenorf to see a nicer looking tooltip.
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...
max-width: 20em;
white-space: nowrap;
...to this
max-width: 300px;
white-space: wrap;
text-align: left;
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 definition tag, too. It's easier.
