3

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.

1 Answer 1

6

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.

3
  • warning: copy-pasting the code does not work because there is a hidden &#8203; character!
    – Leftium
    Aug 28, 2010 at 12:14
  • Chrome and IE 8 do not render <acronym> with a visible bottom border.
    – Leftium
    Aug 28, 2010 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, 2012 at 15:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.