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:

For example, (夢){ゆめ} and 〈爱〉{ài} are valid DynRuby 2 annotations.

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

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

君{きみ}に【重力】{じゅうりょく}シンパシー 何{なに}も話{はな}せなくて
確{たし}かに 今{いま} 僕{ぼく}らは一{ひと}つになる
君{きみ}に【重力】{じゅうりょく}シンパシー 後{うし}ろ 気{き}づかなくても
分{わ}かり合{あ}える 日{ひ}が来{く}るよ
Show all annotations | Hide all annotations

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.