SEO-friendly hyperlinks' tooltips.

For a long time I didn't care on hyperlinks and images' alt or title attributes. The thing changed since I write in Markdown - its very simple syntax (to a degree in which I could call it "friendly") finally makes Me willing to fill those years-forgotten "gaps". If You wonder why exactly is that way - I will tell You that within Markdown-written article all the hyperlinks and their titles may look neat, tidy and be pretty readable. Compare it with their HTML counterpart and You may notice that it is much easier to tell what a particular picture (or a link) is all about:

Markdown source code:

The thing changed since I write in *[Markdown][4]* - its very simple syntax (to a degree in which........

HTML source code:

The thing changed since I write in <em><a href="https://en.wikipedia.org/wiki/Markdown" title="What is Markdown?">Markdown</a></em> - its very simple syntax (to a degree in which........

This is because the source text in Markdown is much much more cleaner "by nature" - than the same text rendered in HTML. Especially when You use so-called reference-style hyperlinks.

Here You can read much more on how Markdown has improved My workflow.

The point is that in order for You to really benefit all those title attributes it could be nice to actually see them in action, not only be aware of their theoretical existence. Although it theory they should be visible (in a form of a tooltip) once the cursor is hovering on the link or an image - in practice it doesn't always happen. Besides, You can't influence the look of those tooltips - which depends on Your web-browser approach and operating system theme. Last but not least, they are pretty small - which makes them harder to read for those with weaker vision.

What if You could improve this situation significantly, by introducing a better look&feel, which will transform into better user experience? Finally all those carefully filled labels could really come in handy. And maybe it will inspire You too to begin to use those things.

In case You'd be interested to know what benefits You and Your Readers could derive out of those inconspicuous alt and title attributes - as a little remainder I'll tell You that:

• they all are Your SEO-friends, uplifting Your content visibility through search engines,
• they will help Your Readers to figure out what Your hyperlinks are about - before They click anything to check by Themselves,
• finally, they look much better - You can make them even more readable (by enlarging the font a little bit, for example) and it will be definitely appreciated by visually impaired readers;

As a starting point I used CSS tooltip described on W3Schools - this was My inspiration. I was intrigued how such a thing like a tooltip may be produced by sole CSS. After a closer look I've realized that the solution is not so handy, because it requires for You to insert much of additional code each and every time You'd like to insert a tooltip:

<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>

So, as You see in the example above:

1. You need to add a code to indicate that "Over this element should be a tooltip initiated".
   and
2. You need to insert the whole extra element (here it is a <span>) to define the tooltip's actual content.

Definitely too much hassle.

It wasn't even connected especially to the HTML hyperlinks - in the tutorial's approach CSS tooltips may be generated whenever You'd like to see them (i.e. hovering a cursor on whatever You want).

Since I wanted to achieve an effect similar to the SEO-friendly picture labels described here - I preferred to use hyperlinks-referred tooltips which will harness already existing hyperlinks' title attributes. To do so, I modified W3Schools's way and added a little bit of jQuery to it. The CSS part I left intact, just chose a tooltip's characteristics to My Own liking (it is fantastically described in detail in the actual tutorial). In My case the CSS final code looks as follows:

/* CSS tooltip start /

/ Tooltip container /
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted grey; / If you want dots under the hoverable text /
}

/ Tooltip text /

.tooltip .tooltiptext {
visibility: hidden;
width: 240px;
background-color: black;
color: $TLUPink;
text-align: center;
line-height: 1.1em;
font-family: 'Lato', sans-serif;
font-style: normal;
font-size: 0.9em;
padding: 5px 0;
border-radius: 6px;
opacity: 0;
transition: opacity 1s;

/ Position the tooltip text - see examples below! /

position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -120px; / Use half of the width (120/2 = 60), to center the tooltip /
}

/ Show the tooltip text when you mouse over the tooltip container /

.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}

.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; / At the bottom of the tooltip /
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: yellow transparent transparent transparent;
}

/ CSS tooltip end */

Now it's time to add some jQuery magic :) . What I find especially fantastic here is that You don't need to modify Your HTML template at all :) .

Let's discuss the actual code. In the snippet You'll see below, You do two things: indicate what element should have a tooltip attached, and insert its actual content.

Since we consider strictly hyperlinks-related tooltips, You don't need to wrap chosen elements by additional <div> - You just need to ascribe a .tooltip CSS class to hyperlinks (which may already exist within Your articles). You can do it as follows:

$(".post-body a[title]").addClass("tooltip")

Note that this code doesn't attach a .tooltip class to every link within Your posts - but only to those which are equipped with a title attribute. The reason is that since Our tooltips will gain their content out from hyperlinks' title attributes, in case of a hyperlink without this attribute Your Guest would see an empty tooltip - which does not make sense. So in order to avoid it, Your code is more precise by pointing out only those hyperlinks which in fact do have title attribute filled.

Another thing for You to do is to set "a box" into which tooltips' content will be inserted automatically. This "box" is in fact the same span described by W3Schools - with that difference that this time You use it as a template, "a stamp" for jQuery to use within Your articles' HTML code. You can extend the code into this form, which does what we discussed a moment ago - plus appends "a box" for tooltips' content. It may look as follows:

$(".post-body a[title]").addClass("tooltip").append("...")

So at this point each link within Your article/post will have a .tooltip class ascribed + an additional span for the tooltip's content pasted just next to it.

Now let's make jQuery do the actual "magic":

$(".tooltip").each(function(){
(this).find(".tooltiptext").html((this).prop("title"));
});

The code above means: within each .tooltip-classed element (i.e. all article's hyperlinks with a title attribute - as You've set it earlier on) find a .tooltiptext class and insert its parent title attribute's content into it.

And this is exactly a desired effect. Now hover the cursor over a hyperlink which You equipped with a title description and You should see a nice tooltip. You can customize its appearance, position, and even animate it a little bit - all of it is described in a comprehensive way here.