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):
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.
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.