A very practical resource in technical sites or those that usually use abbreviations or acronyms of unusual terms is to show a tooltip text when the cursor is on hover the word or abbreviation in question, to give context to the visitor and not to accumulate misunderstandings in the reading.
These are commonly known as tooltips.
Right here on the blog, I use them from time to time, especially to show the meaning of technical words, uncommon abbreviations and even terms in other languages.
If you are curious and have ever considered using this very practical resource for your web visitors, here I explain two ways to do it.
HTML tooltips
The traditional way of displaying tooltips is through the HTML abbr tag.
The syntax is very simple, the same as with links, here’s an example:
<abbr title="EMERGING TEXT TO BE SHOWN WHEN HOVERING">Text to be explained</abbr>.Code language: HTML, XML (xml)This method will work in all browsers, it just has the hassle of you having to walk around putting in HTML by hand every time you want to display the tooltip.
Tooltips with plugins
How would you like to automatically schedule tooltips for acronyms and abbreviations you use regularly and not have to add HTML every time you use them?
Well, there’s a plugin that will help you with this task. It’s called Text Hover and it’s very easy to use, plus it has some very useful options.
Once it is active, go to its settings page (Settings > Text Hover) and use the text area to add those terms for which you want to automatically display an explanation tooltip.
The syntax to be used is very simple, for example…
WP => Short for WordPress - The best web publishing systemCode language: PHP (php)You only have to add lines, following the model, with your terms, acronyms and abbreviations, followed by the => of the tooltip you want to show the visitor when he passes the cursor over the term, which will be shown in your text with a dotted underline, to distinguish it from the rest of the text.
The only rules are:
- Don’t use more than one line per replacement tooltip.
- You can use basic HTML tags (href, strong, img, etc.) but don’t overdo it, remember it’s a tooltip, not a product sheet or anything like that.
It is highly recommended to check the box to improve the appearance of the tooltips, much easier to read than the native system of the browsers.
It would look like this…
From this moment on you only have the task of feeding terms, acronyms, abbreviations, etc., with their tooltips, the plugin settings.
Read this posts in Spanish: Cómo mostrar texto emergente al pasar el cursor sobre una palabra
