How do I insert acronyms/tooltips in Blogger?

I have Korean words on my blog, and I would like to show the romanization either in the status bar or as a tooltip on a mouse-over. This text does not hyper-link to anything.

On certain websites I have seen acronyms that have a special dotted underline. When you place the mouse over these words the full, expanded word is shown in the browser status bar. I would also be happy if a tooltip popped up with the romanization.

How can I achieve this effect simply on Blogger? I am using MS Live Writer to compose my blog entries. In your answer, please include how well browsers support your solution.

Update: I modified eagle's solution slightly:

span.korean {
border-bottom-width: 1px;
border-bottom-style: dotted;
}​


and added it to Blogger Template Designer's "Add custom CSS." The result looks like this.

This is an HTML feature. You can either use the <acronym> tag, or a <span> element. If it's not an acronym, I'd recommend using <span> with a custom class attribute. The trick is to place the text you want to appear in the hint as the title attribute.

Here's an example of the HTML:

Can I get this <span class="myclass" title="as soon as possible">ASAP</span>?


Now to get it formatted with an underline, you need to add this style anywhere in your HTML, preferably only once in your template:

<style type="text/css">
.myclass {
border-bottom-width: 1px;
border-bottom-style​: dashed;
}​
</style>


This should work in all of the major browsers.

• warning: copy-pasting the code does not work because there is a hidden &#8203; character! – Leftium Aug 28 '10 at 12:14
• Chrome and IE 8 do not render <acronym> with a visible bottom border. – Leftium Aug 28 '10 at 12:17
• The acronym tag has been dropped in HTML5. The abbr tag should be used instead (supported in IE7+ and all other browsers). – MrWhite Nov 21 '12 at 15:53