リンクにhoverすると、そのURLをQRコードで表示するツールチップ（jQueryを使用）

URLをQRコードで表示するツールチップ

サンプルのリンク（青色のテキスト部分）は、そのテキストを検索クエリ（検索する語句）にしてGoogle 検索に飛ぶようにしてあります。リンクにhoverすると、そのURLをQRコードで表示するツールチップがリンクの上側に立ち上がります。QRコードをスマホなどで読み取り、リンク先（Google 検索）に移動できます。また、そのままリンクをクリックしても同様に移動します。

サンプル

青空文庫・夏目漱石「吾輩は猫である」から

今まで辛棒した人の気も知らないで、無暗に馬鹿野郎呼わりは失敬だと思う。それも平生吾輩が彼の背中へ乗る時に少しは好い顔でもするならこの漫罵も甘んじて受けるが、こっちの便利になる事は何一つ快くしてくれた事もないのに、小便に立ったのを馬鹿野郎とは酷い。元来人間というものは自己の力量に慢じてみんな増長している。少し人間より強いものが出て来て窘めてやらなくてはこの先どこまで増長するか分らない。我儘もこのくらいなら我慢するが吾輩は人間の不徳についてこれよりも数倍悲しむべき報道を耳にした事がある。

サンプルのhtmlソースとスクリプト

<p>今まで<a href="https://www.google.com/search?q=辛棒">辛棒</a>した人の気も知らないで、無暗に馬鹿野郎呼わりは失敬だと思う。それも平生<a href="https://www.google.com/search?q=吾輩">吾輩</a>が彼の背中へ乗る時に少しは好い顔でもするならこの<a href="https://www.google.com/search?q=漫罵">漫罵</a>も甘んじて受けるが、こっちの便利になる事は何一つ快くしてくれた事もないのに、小便に立ったのを馬鹿野郎とは酷い。元来人間というものは自己の力量に慢じてみんな増長している。少し人間より強いものが出て来て<a href="https://www.google.com/search?q=窘めて">窘めて</a>やらなくてはこの先どこまで増長するか分らない。<a href="https://www.google.com/search?q=我儘">我儘</a>もこのくらいなら我慢するが吾輩は人間の不徳についてこれよりも数倍悲しむべき報道を耳にした事がある。</p>

//スクリプト
 $(function() {
   $('.wrapper a').qr({size: 120});
 });