Result
jQuery
$(document).ready(function() {
//ホバーイベント発火
$(".tip_trigger").hover(function(){
//class="tip_trigger"内からclass="tip"を探す
tip = $(this).find('.tip');
tip.show(); //表示
}, function() {
tip.hide(); //非表示
//ここからマウスムーブイベント
}).mousemove(function(e) {
var mousex = e.pageX + 20; //位置を取得
var mousey = e.pageY + 20; //同上
var tipWidth = tip.width(); //幅を取得
var tipHeight = tip.height(); //高さを取得
var tipVisX = $(window).width() - (mousex + tipWidth);
var tipVisY = $(window).height() - (mousey + tipHeight);
if ( tipVisX < 20 ) { //X座標を超えた場合は幅を調節
mousex = e.pageX - tipWidth - 20;
} if ( tipVisY < 20 ) { //Y座標を超えた場合は高さを調節
mousey = e.pageY - tipHeight - 20;
}
tip.css({ top: mousey, left: mousex });
});
});
css
.tip {
color: #fff;
background:#1d1d1d;
display:none; /*--基本は非表示--*/
padding:10px;
position:absolute; z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
a{text-decoration:none;}
p{margin:25px;width:500px;}
html
<p><a class="tip_trigger" href="javascript:void(0);">ツールチップの出るリンク<span class="tip" style="width: 500px;"><img src="01.png" />このspanの中身がツールチップ。画像も入れられる</span></p>
via
Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.32-2/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
