.net column

.NET開発者のためのブログメディア
検索・抽出

jQueryを使ったツールチップを実装する方法を2種類、実際のJavaScriptコードを基にご解説!

2020年08月25日
SE
動くツールチップのソースコードがよく理解できなくて困っています。
PM
なるほど。では実際のソースコードを見ながら理解していきましょう。

ツールチップとは?

ツールチップとは、Webページのテキストなどの上にマウスポインタを当てると表示される、吹き出しのことです。

よく、メールアドレス入力フォームにマウスポインタを当てると「メールアドレスを入力してください」などと吹き出しが表示されます。あれがツールチップです。

ツールチップはJavaScriptで実装されます。この記事では、JavaScriptでのツールチップの実装方法2種類を解説します。なお、実装を簡易に行うために、JavaScriptのライブラリであるjQueryを利用します。

JavaScriptの解説が目的なので、cssは必要最小限度にとどめています。cssを改造すれば見栄えのいいツールチップが実装できます。デザインの心得のある方は、この記事のソースコードのcssを拡張し、見栄えのいいツールチップを実装してみましょう。

jQueryでツールチップ①:動かないツールチップ

まず1種類目は、マウスをテキストに当てると表示される、位置が固定されたツールチップです。初めにソースコードを示し、次にcss、JavaScriptコードの順に解説していきます。

ソースコード

<!DOCTYPE html>
<html lang=””ja””>
<head>
<meta charset=””utf-8″”>
<title>ツールチップ-1</title>
<style>
#sample{
position: relative;
}
.tooltip {
position: absolute;
bottom: -2em;
left: 1em;
z-index: 9999;
color: black;
background: red;
}
</style>
<script src=””https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js””></script>
</head>
<body>
<div id=””sample””>ここにツールチップが表示されます</div>
<script>
$(“”#sample””).on({
‘mouseenter’:function(){
$(this).append(‘<div class=””tooltip””>ツールチップ</div>’);
},
‘mouseleave’:function(){
$(this).find(“”.tooltip””).remove();
}
});
</script>
</body>
</html>

css

まずcssの解説です。

動かないツールチップの場合、親要素をrelative、ツールチップをabsoluteにしないといけません。

bottomとleftは、ツールチップのテキストから見た表示位置の指定です。

z-indexを最高値に指定して、常にツールチップがテキストの前面にくるようにしています。

JavaScript

次にJavaScriptの解説です。

このサンプルでは、jQueryをCDNで読み込んでいます。Webページと同じサーバにjQueryの本体を置かなくても、URLで指定した個所から読み込んでくれます。

$(“”#sample””).on
でidがsampleの要素にマウスポインタが当たった場合の挙動を制御できます。

‘mouseenter’
は、「マウスが当てられた時」の挙動を制御します。

$(this)
は、この場合、idがsampleの要素です。thisはこのブロックの中ではidがsampleの要素を指します。

そこに、
append
で子要素を挿入しています。
挿入するのは「ツールチップ」というテキストの、tooltipクラスのcssの要素です。

これでツールチップが表示されます。

‘mouseleave’
でマウスポインタが外れた時の挙動を制御します。

$(this)の子要素からtooltipクラスの要素を見つけ(挿入したツールチップになります)、DOMから取り除きます。

jQueryでツールチップ②:動くツールチップ

次は、①を改造し、マウスポインタの位置に合わせて動くツールチップを実装します。こちらもソースコード、css、JavaScriptの順に解説していきます。

ソースコード

<!DOCTYPE html>
<html lang=””ja””>
<head>
<meta charset=””utf-8″”>
<title>ツールチップ-2</title>
<style>
.tooltip {
position: absolute;
bottom: -3em;
left: 1em;
z-index: 9999;
color: black;
background: red;
height: 1.5em;
}
</style>
<script src=””https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js””></script>
</head>
<body>
<div id=””sample””>ここにツールチップが表示されます</div>
<script>
$(“”#sample””).on({
‘mouseenter’:function(element){
$(“”body””).append(‘<div class=””tooltip””>ツールチップ</div>’);
$(“”.tooltip””).css({top: element.pageY + 20, left: element.pageX + 10});
},
‘mousemove’:function(element){
$(“”.tooltip””).css({top: element.pageY + 20, left: element.pageX + 10});
},
‘mouseleave’:function(){
$(“”.tooltip””).remove();
}
});
</script>
</body>
</html>

css

まず、親要素のrelativeをなくしました。

height属性を追加しました。これを書かないと、ツールチップが縦長に表示されます。

JavaScript

マウスが当たったときのツールチップをDOMに挿入する階層が①とは違います。親要素の子ではなく、body要素の直接の子要素として挿入します。

‘mousemove’
は、マウスが動いたときの処理です。

そして、ツールチップを挿入した後と、マウスが動いたときの共通のJavaScriptコードが

$(“”.tooltip””).css({top: element.pageY + 20, left: element.pageX + 10});

です。

$(“”.tooltip””)
はtooltipクラスの抽出です。ツールチップになります。

.css
でツールチップクラスのcssを上書きします。

上書きするのはtop属性とleft属性です。ツールチップの位置を指定します。

elementはイベントからもらうもので、この場合マウスポインタイベントです。

pageXはマウスポインタのX座標、pageYはマウスポインタのY座標です。それを基に調整した値をleftとtopに指定します。

これで、動くツールチップが実装できます。

SE
今までJavaScriptコードで考えていましたが、jQueryだとこんなに簡単だったんですね。
PM
これで見栄えのいいツールチップが簡単に実装できますね。

jQueryでツールチップを簡単に作ろう

このように、jQueryを使えば、JavaScriptでツールチップが簡単に実装できます。平のJavaScriptコードを書くよりも断然早いので、JavaScriptでツールチップを実装するときはjQueryを使いましょう。

 


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)