マウスに追従する吹き出しを表示

jQueryとCSSでマウスに追従するバルーンを表示

jQuery

$(function () { $('span').hover(function() { $(this).next('p').show(); }, function(){ $(this).next('p').hide(); }); // マウス座標を吹き出しにセット $('span').mousemove(function(e){ // 吹き出しに合わせ微調整 $('.arrow_box').css({ 'top': e.clientY - 20, 'left': e.clientX + 20 }); }); });

マウスカーソルと吹き出しが被ると画面がぶれるため、被らないように要調整。

CSS

span { display: block; cursor: pointer; } .arrow_box { display: none; position: absolute; padding: 16px; background: #333; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; color: #fff; } .arrow_box:after { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(51, 51, 51, 0); border-right-color: #333; border-width: 10px; top: 50%; margin-top: -10px; }

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。主にLAPP環境でPHPを書いています。最近はjQueryで遊んでいます。
※動作確認について