DynRuby 2 provides "smart" ruby annotations that are displayed on hover, and works with any browser with support for ruby annotations. DynRuby is designed for displaying Furigana (振){ふ}り(仮名){がな} annotations for Japanese Kanji (漢字){かんじ}, but can also be used with Chinese to display phonetic notations with Hanyu Pinyin (汉语拼音){hàn yǔ pīn yīn} or Bopomofo/Zhuyin Fuhao (注音符號){ㄓㄨˋ一ㄣㄈㄨˊㄏㄠˋ}.

To use DynRuby 2.0, simply enclose all annotated text in an element with the class .ruby-block. Then, use DynRuby's syntax to create annotations. If you have ever used the Japanese Language Stack Exchange, then the syntax should be close to what you have there:

• if on-hover annotations are desired, use （） or () to enclose annotated characters; or, if the base text doesn't have anything other than Chinese characters (including kanji) and the repitition mark (々), you do not need to enclose the characters. Note this will annotate the longest character sequence possible.
• if persistent annotations are desired, use [], ＜＞, 〈〉 or 【】 to enclose annotated characters;
• use {} or ｛｝ to enclose annotations.

There are, however, two technical limitations at the moment:

• Zhuyin Fuhao (Bopomofo) are usually displayed vertically, and might not be displayed correctly if rendered horizontally
• The base text could only contain Chinese characters (CJK unified ideographs), Japanese Hiragana and Katakana, the repetition mark (々), and standard (English) Latin chracters and numbers. Other CJK characters are not recognized by the regex.

The original DynRuby has a more verbose syntax, but it uses only standard HTML tags. For developers interested in customizing DynRuby, the original DynRuby might be more interesting. The page for the original DynRuby is here.

The Kanji in the following lyric snippet are annotated with Hiragana as Furigana. Simply move your mouse on to the characters and you'll see the annotations!

Star Fork

I also provided two "magic links" that displays/hides all DynRuby annotations on click. Once they are displayed this way, they do not respond to hover anymore (until they are hidden by the "hide" link):
"Show: <a class="show-dyn-ruby" href="#">Text here</a>.
"Hide": <a class="hide-dyn-ruby" href="#">Text here</a>.

Of course, don't forget <script src="https://raw.githubusercontent.com/xuanruiqi/dynruby/master/dyn-ruby-2.js"></script>. DynRuby relies on jQuery, so also make sure that you have included jQuery.