26
Sep 2004
Pinyin Tooltips
A while ago Matt from Metanoiac asked me how I do my pinyin tooltips. I was too busy at the time to reply, but since maybe other people are interested in how I do it, I’ll give a public explanation here. (Warning: for those of you with no Chinese-related weblog, this is going to be a very long, boring post.)
“Tooltips” are the little text boxes that pop up when you hover your mouse on certain elements. The picture at left is an example. Internet Explorer (IE) users may be used to using the alt attribute to add tooltips to photos, but this is actually a web design no-no. Non-IE browsers do not display alt attributes as tooltips (this is not the intended purpose of alt), and anyway, alt attributes don’t work for non-photo elements like text. The correct attribute to use is the title attribute.
So you need to use the title attribute to get the tooltip, but what tag does it go inside, and how do you get the dotted underline and the question mark cursor? You need to use CSS for that.
The tag you’ll use is span. All you have to do is define a span class in your CSS. I call mine “info” because it doesn’t have to be used only for pinyin tooltips.
span.info {
border-bottom:1px dotted #00AAFF;
cursor: help;
}
This means the underline (which is actually defined as a border) is 1 pixel thick. “#00AAFF” is its color. The onmouseover cursor value is defined as “help“, which results in the question mark effect.
Then you can use it in your HTML like this:
<span class="info">text</span>
Result:
text
This will give the underline and cursor effect, but not the tooltip. You still need to add in the title attribute:
<span class="info" title="pinyin">text</span>
Result:
text
I’m guessing you want the pinyin tone marks too, though. For that, you’ll need to make sure that your page is encoded in Unicode (most people use UTF-8)*.
For the actual pinyin, I use the Pinyin to Unicode converter at The Fool’s Workshop. It’s very easy to use. Type in “zhong1wen2” and click Convert. You get “zhōngwén” back. Then you just copy and paste. Simple.
Here’s what that HTML would look like after you copy and paste:
<span class="info" title="zhōngwén">中文</span>
Result:
中文
This does mean, however, that you’ll have to convert the pinyin for each word you want to provide pinyin for, which is a bit of a pain. But the result is nice.
Also, it’s worth noting that the tooltip is not going to look good on some old computers or computers using weird fonts for their browsers. It’s a helpful effect for a lot of people, but you probably don’t want to make it central to your design.
* By this I mean that in your webpage’s html the <head> section should include the following metatag:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
If your webpage is encoded in Unicode and you’re using Movable Type like me, it will make your life easier if the default encoding of your edit screen is also Unicode. To do that, just edit the mt.cfg file. You need to find “PublishCharset“. For me it was on line 313 (of 457 total lines). Yours should be similar. Uncomment that line (delete the ‘#’) and change it to:
PublishCharset UTF-8
Thanks goes to John B, who originally showed me how to do this.
