How to add a cool pinyin mouseover tooltip for WordPress

Alright, this post is admittedly narrow in the scope of people that might find it interesting, but with all the new in-China blogs starting up, I figured I’d throw a little help their way. Mind you, this is particularly for blogs that use WordPress.

The desired result:

Take a Chinese sentence, 这个博客真厉害!, and cause it to do this (put your mouse cursor over the sentence): 这个博客真厉害!

Now, of course, this can be changed to have the language in any order depending on what you’re trying to express:
zhège bókè zhēn lìhai!
This blog is radtastic!

The Code:

This is done by enclosing the phrase you want to have the effect on with a <span> tag. You then assign the tag a class (tech term for “name that tells it what style to use” – more on style below). On my blog I use “pytooltip” as the class name, but you can change this to whatever you want, as long as it’s not the same as any other class on your site.

Here’s an example of the code I used for the above phrase:
<span class=“pytooltip” title=“zhège bókè zhÄ“n lìhai! | This blog is radtastic!”>这个博客真厉害!</span>

You can see the class=”pytooltip” names the tag, and the title=”” contains the content of the tooltip/mouseover effect.

The Style/CSS:


Next you need to add the “style” settings to your WordPress template. This is simply done by navigating over to the Presentation/Theme Editor tab in the Administration (backend) of the blog. Very likely anyone with a WordPress blog will be familiar with this screen. If not, this is where the template files for your blog’s theme can be edited. The first (default) file to be displayed for editing is the style.css file (if not, locate it on the right-hand side).

If you don’t know much about CSS, check this brief introduction out.

My site uses the following two CSS assignments:
span.pytooltip {border-bottom: 1px dashed #b6b6b6;}
span.pytooltip:hover {color: #fff; background:#a10101; cursor: help;}

The first defines the initial style of the affected phrase (how it looks before the person puts their mouse over it). The second defines what happens when the mouse is ‘hovering’ over the text/phrase. Again, for information on specific effects you can use with CSS, check out that link above. Basically, all I do is change the bottom border to a dashed line (using color #b6b6b6) and then on hover I change the text color, background and make the cursor display the question mark. Simple enough.

Making It Easier:

The problem with all this is that it’s a bit of a pain to continually insert all that code for each phrase. If you are using the WordPress Visual Editor (WYSIWYG editor), you also have to go the additional step of editing the HTML for the post. To get around this what I’ve done is turned off the visual/rich text editor, so I’m able to insert HTML tags directly into the text of my post and not have them stripped when I press the “Publish” button. NOTE: In doing so, you’ll need to learn how to add style in plain text mode. If you’ve no background in HTML it can be daunting at first glance, but it’s actually quite easy and will hugely benefit you in the long run.


With the WYSIWYG editor off, you’ll notice that WP uses a series of buttons at the top of the editing window, these are called QuickTags and make inserting HTML a breeze. Basically, you just select your text, press the appropriate QuickTag button, and Mao’s your uncle.

To make the Pinyin Tooltip easy to insert, I’ve simply added a QuickTag called “py” that will automatically insert the following code around the selected phrase I wish to Pinyinify:
<span class=“pytooltip” title=“”></span>

This is reasonably easy to do. Simply use an HTML or basic text editor and edit the quicktags.js file located in the [blog root directory]/wp-includes/js/ directory.

Scroll down a bit and you’ll see a series of items that all start with edButtons[edButtons.length] =. Each of these items represents a QuickTag button. Insert the following code somewhere in this section (where depends on in which order you want the button to appear):

edButtons[edButtons.length] =
new edButton('ed_pytooltip'
,'py'
,''
,'
'
,'p'
);

Save and upload this file to the corresponding directory on your server. That’s it. Reload your Write Post page, and it should display a new “py” button.


That’s all. Hope this little “How/Hao To” assists some of you in the China blogsphere. If you have any questions or modifications to this, please leave a comment.

Credit, where credit is due:

Like an idiot, I decided to do a bit of a search of the Chinese blogsphere AFTER I had written this to see if anyone had made mention of it before… and sure enough my good friends Rick and John both have great posts about this… if my post doesn’t help you, check out the following:
How to Annotate Chinese with Pinyin Tone Markers at Panda Passport
Adding the pinyin quicktag in WordPress at Sinosplice

John also makes mention of the WordPress Quicktags Guide, if you want more information about adding Quicktags.

Resources:

Alright, so you’ve got all this set up.. how do you get the pinyin? Well, first you need an Input Method Editor (IME), once you’ve got that, you can input Chinese characters. Take these Chinese characters and head over to Adsotrans (or use Wenlin) and get the pinyin with the tone markers and all that.

UPDATE:

I was talking to Rick about this today and he mentioned that the <abbr> tag shows up in RSS feeds, whereas the <span> tag doesn’t… so… I might suggest replacing all mentions of SPAN above with ABBR, particularly in the main HTML used in your posts, the CSS and the Quicktags.js file.

10 Responses

  1. Good post man. I don’t think we covered it in as much detail as you did though.
    Good show. Thanks for explaining how to make that quicktag.
    I believe John has it available as a plugin.

    I mentioned in my post that I’d had some problems with the Adsotrans-produced third tone markers (they often display as squares), and I’ve had more success first producing numerican pinyin with adsotrans, and then bringing it into the Toshuo pinyin converter. (Google “Toshuo” to find.)

    …something to keep in mind for anyone who does this.

  2. Oh sweet wordpress. I really must get round to switching my blog over. It’s happening soon, but I’ve been saying that for two weeks now. This post will be handy, especially when I can actually write something in Chinese.

  3. @Chris: Are you getting your own server or just switching to WordPress.com? As, last I checked, the latter is blocked in China. I switched to WordPress, from Blogger, nearly a year ago now and haven’t looked back. I love wordpress.

    @Rick: I don’t have the problem viewing anything from Adsotrans… curious that it’s causing you problems. Did you fire dem boyz an e-mail re: it? I just as often just copy it straight from Wenlin – an indispensable program if anyone doesn’t have it.

  4. I’m buying my own server space. It’s just one of those things I ought to have, I think. I’ll probably go for the same company Rick has, since it’s in Hong Kong and isn’t as likely to be taken out by a Taiwanese earthquake or PRC shenanigans. Rick was touting wordpress all night last time I saw him, and I hear good things on pretty much every front, so yeah, I’m looking forward to the switch. Just have to stop being lazy. 😉

  5. Thank you for the tips. You might want to look at the WordPress Macro plugin. I use it so I don’t have to constantly cut and paste the special pinyin tone characters.

    WordPress is a great system. I have been using it for a very long time and I can’t see myself using anything else in the near future.

  6. i’m pretty sure you meant to say 这个博客真厉害 not 着个博客是真厉害
    dude you’ve been in this country for years now
    how can you’re chinese be so bad?

  7. The product of typing in my IME too fast, copy and pasting and not checking my work I’m afraid. And when did a typo become an indicator of “bad Chinese”? I make English typos all the time and my English abilities aren’t being called into question.

    As for the “是” issue… I always have trouble not using it. I “get” that it shouldn’t be used with adjectives, and only more like “as a state of being”, but it’s just something I always fuck up… much like you and telling the difference between contractions (you’re) and possessives (your).

  8. It’s pretty easy to set up larger, more readable tooltips like those used on newsinchinese and adsotrans’s annotation if you want – the code is slightly more complex, but if you’re happy with doing the above it shouldn’t be too difficult and you can customize size, colours, fonts,etc, which I don’t think you can do with the standard method. I won’t post it here as I doubt the javascript will show up and I’d probably get it wrong, but if you have a look at the html source of newsinchinese.com it should be easy enough to figure out.

  9. Cheers Roddy – I’ll definitely be checking that out. I know how to do more advanced tooltips (check out the front page of my site), but this is a pretty non-intrusive and simple to setup way… and it pretty suitable for simple one-line tooltips.

Leave a Reply

Your email address will not be published. Required fields are marked *

*