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.

More tools & options button

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.

About pendantry

Phlyarologist (part-time) and pendant. Campaigner for action against anthropogenic global warming (AGW) and injustice in all its forms. Humanist, atheist, notoftenpist. Wannabe poet, writer and astronaut.
This entry was posted in Communication, Computers and Internet, Education and tagged , , , , , , , , , . Bookmark the permalink.

9 Responses to How to add mouseover tooltips to links in WordPress

  1. Thank you for writing this, I will attempt to try this on one of my posts.

    Liked by 1 person

  2. This post is very well written in a sense that anyone can understand it. You provide explanations for everything. It’s also a very helpful post. However… my hyperlinks always do that without me needing to edit anything. If I open a post of mine through the website, I hover over a link and see the address. If I am editing my own post, when I click on the link, it highlights the text and shows the web address underneath it. So… hmm…</b.

    Liked by 1 person

  3. Wow! Maybe you should become one of those “happiness engineers at WP” as this is helpful info. I wracked my non-tech brain the last few days trying to find out how to view something in HTML on Gutenberg (even though I’m not well-versed in HTML but at times was able to make minimal alterations this way in the Classic Editor). Thanks for your help!

    Liked by 1 person

I'd love to hear what your views are!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.