Pinyin Tooltips: a Plugin Is Coming
Over the years, I’ve been asked by quite a few people about how I do the pinyin mouseover tooltips on Sinosplice. (Here’s an example: 中文.) It’s a combination of HTML, CSS, and javascript, none of it terribly complicated. (My friend Brad helped me with the javascript parts.)
Anyway, now that Sinosplice has been redesigned, it feels like it’s time to do the tooltips right: as a WordPress plugin. That way WordPress upgrades will be (mostly?) unaffected, and I can easily share the tool with other bloggers. I’m working with a developer now to create the plugin, free and opensource.
Basically what it will do is:
– Add the CSS you need, giving you a few options
– Add the javascript you need
– Add a quicktag to the HTML text editor to facilitate addition of tooltip code
The good part is that the effect is general enough that it doesn’t have to be pinyin-specific, meaning it could work for regular English blogs, blogs about Japanese, etc. I know there are a few WP tooltip plugins out there, but none of them offer quite what I want, as a blogger frequently writing about Chinese for learners.
I’ll be presenting the idea at Shanghai Barcamp tomorrow; maybe I’ll get some good ideas there. Good ideas are always welcome in the comments, too, of course!
Will it also allow translation tooltips a la chinaSMACK’s new system? I have a blog that I hope to eventually move off wordpress.com onto my own site (once I have money for hosting) and would like to be able to do translation tooltips or something similar that hides original text if I translate a big block.
Yes. What ChinaSMACK (and also ChinaGeeks) does is the same thing I’ve been doing; they just don’t use javascript for the pretty effect, since it’s not well suited to large blocks of text.
The plugin will have an option of turning off the javascript tooltip effect, giving you basically what ChinaSMACK does.
I’m excited about this, John. I think you explained the system to me before and I was too lazy to implement. As a wp plugin, I’ll definitely find places to use it.
Just don’t forget to follow up on your pre-announcement 😀
Great! Been waiting for this for a long time.
Cool stuff….way to share
I’ve always been impressed with how tooltips worked on your site, and I’ve been looking everywhere for a good wordpress plugin now that I’ve started a blog of my own but I haven’t been able to find anything even half decent. It’s really great that you are going to release something, and I look forward to seeing it soon!
Thanks very much for sharing!
Your talk at barcampsh was nice, and I came across a gem in HTML5 specs. I immediately thought about your plugin and that definitively might interest you if you’re not already aware of it: http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-ruby-element
Keep on the good work!
How’s this coming along? This will be a super helpful plugin when it’s released!
It’s coming along… It’s a little behind schedule (I had planned to release it in July), but the developer is “plugging away” (ha!) in his free time, and it’s nearing completion.
I’ve been working a little javascript plugin to do something similar, but since I’m too lazy to add all the metadata necessary, my plugin will add all the data for me.
Hearing that yours is near completion will hopefully inspire me to complete mine.
Here’s a quick preview of the little javascript tool I mentioned above.
http://blog.lingomi.com/2010/08/two-tools-youll-want-to-use/
It takes a different approach that the one you’re working on, but this one will work on any page, not just wordpress. If any one is interested in testing it out, contact me via the post on my blog.