Annotating a Passage Using HTML

Here’s how to do a hover annotation, where additional text will appear when your cursor hovers over certain words. Try it out by holding your mouse over this sentence for a second. We will use this technology to annotate our paragraphs. To do this in your own posts, you need to switch back and forth between the “visual” and “text” tabs. You can use the following html code to make a hover annotation, but you have to do so when you’re in “html” mode, otherwise you’ll just see code!

The code pasted in Visual tab would look like this on your blog (incorrect):

<a title=”the text that hovers goes here”>the word or phrase to be hovered goes here</a>

The code pasted in Text tab would look like this on your blog (correct):

the word or phrase to be hovered goes here

For more help, see:

Here are some screenshots

First is one of where the Visual/HTML tabs are (in the upper right corner). Yours will say “Text” instead of “HTML.”

Second is what (part of) the HTML looks like for the hover annotation of a Shakespeare sonnet. You can see it’s pretty messing and confusing looking.

But here’s what that actually looks like when published on your blog:

Since brass, nor stone, nor earth, nor boundless sea,
But sad mortality o’ersways their power,
How with this rage shall beauty hold a plea,
Whose action is no stronger than a flower ?
O how shall summer’s honey breath hold out,
Against the wrackful siege of batt’ring days,
When rocks impregnable are not so stout,
Nor gates of steel so strong but time decays ?
O fearful meditation, where alack,
Shall Time’s best jewel from Time’s chest lie hid?
Or what strong hand can hold his swift foot back,
Or who his spoil of beauty can forbid?
O none, unless this miracle have might,
That in black ink my love may still shine bright.

Three pieces of final advice: 

1) You should first do your annotations in your notes or in separate documents before turning them into HTML. Then work through each word methodically and cut and paste the template text: <a title=”hover text”>hover word</a>

2) Be careful when pasting into html from a word document–if you have styled quotation marks (i.e., the fancy curly ones instead of the straight ones you see in the above screenshot) that could cause problems.

Here are some pics of the fancy, smart quotes (don’t use) and the straight, dumb ones (which you should see when you are looking at Text tab). If you are only seeing one word that hovers, the problem is most likely that you cut and pasted a “smart” quote.
Smart Quotes Dumb QUotes

3) There are some blog themes where this simply won’t work. So, if you’re really having trouble, try copying my example above to see if you can get it to work (edit: and then retype the first double quote).

You will have questions, so please leave them in the comments so we can all learn.

Print Friendly, PDF & Email

About Kevin L. Ferguson

Associate Professor of English and Director of Writing at Queens
This entry was posted in Prof. Ferguson. Bookmark the permalink.

4 Responses to Annotating a Passage Using HTML

  1. I tried it out but it will only appear (when you hover over it) as one word. I followed the steps that were outlined correctly, but still it will appear as one word. Probably my theme does not support the HTML annotation. What do I do?

    • Ah yes–this is actually a problem a few people might have. The very first quotation mark, after the part that says
      a title=”
      needs to be a “dumb” quote. While you’re in Text mode, try deleting just that double quotation mark, and retyping it. That should fix the problem.

      I’ve added pictures to the post above with an example of a “dumb” and a “smart” quote.

      Also: try as I might, I can’t get the code to look right in the post (i.e., to have the dumb quote), so if you cut-and-paste from this blog post, you will (most likely) need to retype the first double quotation.

  2. I have “dumb” quotes, so that’s not a problem. However, any phrase I selected to annotate will not highlight…is there anything I can do to remedy this?

Comments are closed.