Dec 012011
 

You may have noticed a nifty new feature in the last post: a tooltip-style pop-up that lets you see pinyin when you hover your cursor over hanzi (dashed underlining indicates that a tooltip is available). This is made possible by a WordPress plugin called “Sinosplice Tooltips” originally developed for Sinosplice, an excellent Chinese language and culture blog.

The admin experience

The plugin was super-easy to install and configure. I appreciated the ability to pick one of four color schemes to match reasonably well with this blog.

Once installed and configured, adding the tooltips is also extremely simple using the quicktag that gets added to the WordPress html editor by default (but can be disabled) during installation. You just enter the pinyin you want, using tone numbers, and it gets automatically converted to proper tone marks. Here’s how the interface looks:

Screenshot of interface for adding a Sinosplice Tooltip in WordPress

Adding a Sinosplice Tooltip in WordPress

Note that the Tooltips will not appear in the WordPress Visual editing mode, but you can see them in the HTML Editing mode as a span class tag. Also, if you preview your post, they will appear and function fine.

The user experience

Here’s the result of adding the Tooltip as illustrated above:

中文

In fact, you can use the Tooltips with the hanzi and pinyin positions flipped, or with various languages in each postion, like this:

zhōngwén

中文

China

Sinosplice

The effect is very like the popup glossary option in the Moodle LMS.

I was glad to see the Tooltips appear when viewing a site on an iOS device (in Safari, both the full web view and the mobile view provided by WPtouch). You need to click the word, rather than hover over it. The only hiccup is that I can’t figure out how to get the Tooltips to disappear. Each one will disappear when you click another, but the last one always stays onscreen (unless you reload the page).

When using my preferred newsreader, Pulse News, the Tooltips do not appear in the text view, but do if you switch over to the web view. I suspect other newsreaders may work the same way, so if you’re reading this post on one, you may not see the examples here.

Many thanks to the folks at Sinosplice for developing and sharing this great tool.

Learn how to install and use Sinosplice Tooltips on Sinosplice.

Note: Certain themes may not let the Tooltips display properly, so if you have trouble, that might be the reason; I would recommend contacting the developer for help. The theme used for Zhongweb so far has been Suffusion and I have not noticed any problem.

  One Response to “Sinosplice tooltip plugin for WordPress”

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>