マウスに追従する吹き出しを表示
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;
}
サンプル
