Take the 2-minute tour ×
Web Applications Stack Exchange is a question and answer site for power users of web applications. It's 100% free, no registration required.

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.

share|improve this question

1 Answer 1

up vote 6 down vote accepted

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.

share|improve this answer
    
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). –  w3d Nov 21 '12 at 15:53

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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