Sinosplice Tooltips 1.1.1

There’s a new version of the WordPress Sinosplice Tooltips plugin out. With the help of Mark Wilbur’s pinyin tone mark conversion code (see it in action on Tushuo.com), version 1.1 added the ability to convert numeral pinyin (like this: “Zhong1wen2”) to tone mark pinyin (like this: “Zhōngwén”), and add that pinyin as a tooltip to text within WordPress, producing a nice little tooltip effect on your WordPress blog or site (like this: 中文).

Installing and using the plugin is by no means difficult, but in case you’re new to WordPress, to blogging in general, or to the idea of tooltips, this is the post for you! Here I’ll just go over quickly how to install it on WordPress 3.0.5 and what exactly you need to do to produce the effects above.

1. Install the WordPress Plugin

You can go to the Sinosplice Tooltips WordPress plugin page, but manually downloading means manually uploading via FTP. These days it’s much easier to do everything within your own WordPress admin section.

So, first log into WordPress and click on “Plugins” in the sidebar. At the top of the WordPress Plugins page, next to the title “Plugins,” you should see an “Add New” button.

Click on “Add New.”

The resulting page will look something like the one pictured below. Find the search box.

Do a search for “sinosplice” (no quotes). The results should look like the page below.

Click on “Install Now” and the result should look like the page below. You can activate the plugin right away by clicking on “Activate Plugin.”

2. Adjust the Settings

To get to the Sinosplice Tooltips settings page, first click on “Plugins” in the sidebar of the WordPress admin section.

On that page, there are two ways to get into the tooltips’ settings: (1) through the settings link under the plugin’s title in the plugins list, and (2) through the “Sinosplice Tooltips” link in the sidebar, under “Plugins.”

Click on either of those two links. (They go to the same place.)

On the Settings page, you can make a number of changes:

1. The tooltip theme (choose a color)

2. The tooltip span tag CSS class (if you don’t know what that means, you should be fine leaving it alone)

3. Option to repeat the tooltipped text within the popup (repeating the text creates a sort of “magnification” effect)

4. Option to add a quicktag into your WordPress HTML editor (you almost certainly want this; without it, you lose most of the convenience that the tooltip provides)

5. Choice of converting to tone mark pinyin within the editor, or not until the final published page (The default option is best for most people, because you can see immediately if the tone marks converted properly, or if you made a mistake entering the pinyin. The reason you would choose the latter is if you’re a techie person, and want to save all tone mark data in the simpler numerical form, in order to minimize the possibility of encoding or display issues. To put it another way, it’s a clearer separation of content (data) and presentation (tone mark effect). If your blog is relatively new, you probably don’t need to worry about this. I use the default myself.)

If you make any changes, don’t forget to click on “Save” at the bottom of the page.

3. Edit a Post

Now comes the fun part! Create a new post or edit an old one. You need to be in “HTML” editing mode, not “Visual” editing mode in order to see the new “pinyin” tag. (See screenshot below.)

Just for the purpose of this tutorial, you’ll notice that the pinyin contained in the tags above is in two forms: (1) tone mark pinyin in the second paragraph, and (2) numerical pinyin in the third paragraph. You’ll normally be using just one or the other, but both work!

I recommend saving your post as a draft and then previewing it to make sure you’re getting the proper tooltip effect. Make sure that the preview page downloads completely when you test it; if it doesn’t fully download, you won’t see the tooltip effect.

4. See the Results

Below is an example of the resulting tooltip, which is based on the HTML code you saw above. Note that on this page, both tooltip effects will look exactly the same.

That’s it! Please let me know if you have any questions or comments. The developer I’m collaborating with, Andy Warmack, will also be replying to comments here.

Also, anyone that has an account on WordPress.org, please take the time to review the plugin! Enjoy.