How to add mouseover tooltips to links in WordPress

Recognising HTML anchors

To make sense of this post about ‘mouseover tooltips’, you will want to be able to recognise what the HTML code for a link (known as an ‘anchor’) looks like, which is this:

<a
href="web address -- AKA 'URL' -- goes here"
>
Link text goes here
</a>

If you don’t feel confident about recognising an anchor, you may want to refer to this post, which I wrote back in February.

About tooltips

Before going further, I should explain, in case you don’t know, what I mean by a ‘mouseover tooltip’. This is text that appears when you hover the mouse over a link. (Since you can’t do this on a smartphone, these tooltips have no effect in that environment.) I’ve added these ‘tooltips’ to the links in this post — go ahead and hover your mouse over this one, for instance, to see what I mean. These can be quite handy, because they can give you extra information on where a link goes before you actually follow it. (I don’t know why WordPress doesn’t have this functionality already built in.)

Switching between ‘visual’ and ‘code’ views

First off, you need to know how to switch between the default ‘visual’ view and the ‘code’ (HTML) view of a page in WordPress. In the Classic Editor, this is easy to do: there are two tabs on the right-hand side labelled ‘Visual’ and ‘HTML’. The downside here is that the ‘HTML’ view shows you the HTML for the entire page, so you may have to hunt to find the anchor you’re looking for.

In the Block Editor there are three ways to switch between views. Probably the most convenient is to change the view of just the block that you’re working on. You do this by using the ‘More options’ button for the block (looks like three dots in a horizontal row) and then selecting ‘Edit as HTML’ or ‘Edit visually’ to toggle between the two views.

Alternatively, you can change the view of the entire page using the hotkey combination Ctrl+Shift+Alt+M, or you can use the ‘More tools & options’ button (looks like three dots in a vertical row just to the right of the green ‘Jetpack’ symbol), and then choose ‘Visual editor’ or ‘Code editor’ from the ‘Editor’ section.

Adding a title attribute to a link

An anchor HTML element can contain a number of ‘attributes’. The one that we’re interested in is the ‘title’ attribute — this is what should show on a mouseover.

So… first you add a link to some text (highlight the text you want the link to appear on, click the ‘Link’ button for the block — shortcut Ctrl+K — enter the URL). Then:

1. switch to HTML view
2. find the anchor code for the link
3. add a title attribute, so it looks like this:

<a title="mouseover tooltip text here" href="URL here">link text here</a>

Switch back to ‘visual’ view, hover your mouse over the link, et voilà!

If you have any questions, please don’t hesitate to shout out in the comments.

H/T to Bella of ThoughtsnLifeBlog for encouraging me to create this post.