Blogger: Enabling Tooltip on a Hyperlink

Last week, I bought another domain to set up a new blog on Blogger. My first post there is about setting up a custom domain. While composing it, I noticed that the link window where you can change a hyperlink setting does not have an option to add a tooltip, ScreenTip, infotip, or whatever they call it. In WordPress though, that option (title) is readily available in the link window. It is also available in Microsoft Word where I usually draft a new piece. Now, since I often add links to a post, I prefer using tooltips to help visitors especially computer users:

  • Recognize what they are going to click.
  • So that they will be aware on which page they will be redirected instead of just saying “click here“, “go to this link“, “click this link“, et cetera.
  • And lastly, to provide a clearer description of a link.

Enabling Tooltip on a Hyperlink

1. After you add a link on a text, click on HTML beside Compose. 2. Find the anchor text with the hyperlink. Locate the href attribute of the “a” element. See example below. Adding a Title Attribute 3. Add title attribute after it, for example, title=”Put the link description here”. You must add it immediately before the right angle bracket (>). Do not forget to add a space after the second double quotation mark of the href attribute.

<a href=”http://www.peroro.net/” title=”Peroro Home Page”>this link</a>

4. Now, go back to the Compose tab, and rest your mouse cursor to the anchor text. The tooltip will appear after which. Tooltip

What if the Link Contains a “rel” Attribute?

You can still add a title attribute between href and rel, or after rel. Just follow the same format provided above. Here’s an example:

<a href=”http://www.peroro.net/” title=”Peroro Home Page” rel=”nofollow”>this link</a>

If you add the title attribute between href and rel, it will be moved to the end of the “a” tag automatically when you switch back to Compose tab. That’s it! Finish your work. Publish it, and test the tooltip on different web browsers such as Mozilla Firefox, Google Chrome, Internet Explorer, Safari, Opera, et cetera. Tooltips are supported in major web browsers. I personally tested it on Internet Explorer 11, Mozilla Firefox 29.0, Opera 21.0, and Google Chrome 34.0.1847.131 m.

References

Various Contributors (September 2, 2004) “Tooltip” Wikipedia, the free encyclopedia. Retrieved on May 13, 2014 from en.wikipedia.org/wiki/Tooltip Various Contributors (November 30, 2004) “Anchor text” Wikipedia, the free encyclopedia. Retrieved on May 14, 2014 from en.wikipedia.org/wiki/Anchor_text

Leave a comment

Your email address will not be published. Required fields are marked *

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