How to insert acronyms/tooltips in Blogger

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.

Best Answer

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.

Related Topic