PHPプログラマーの松永です。
今回は、ユーザーへのちょっとした説明などに使用でき、ユーザーの操作へのヒントを表示できるツールチップの実装方法を紹介します。
目次
実装方法
ツールチップは、CSSとJavascriptを使用して実装します。
Bootstrapなどのフレームワークにはとても簡単に実装する方法がありますが、ツールチップのためにフレームワークを導入するのはよくありません。
そこで今回は、フレームワークなしでツールチップを実装していきたいと思います。
HTML
HTMLは、とてもシンプルで
- 表示をしておく要素
- ツールチップの要素
の2つのみです。
1の表示をしておく要素にマウスオンするとツールチップが表示される仕様を想定しています。
<span class="tooltip p_relative">ツールチップを表示</span>
<span class="tooltip_message d_none p_absolute t_center">表示されました。</span>
CSS
先程実装したHTMLに対し、CSSを設定します。
初回の実装には、HTMLの1, 2の要素を表示したままCSSを整えたほうが実装しやすいと思います。
「Javascriptを使用した表示・非表示の処理はHTML, CSSが整ってから」と割り切ることでHTML, CSSに注力することができるため質の向上にも繋がりますよね！
/**
* Style
*/
$blue: #00BCD4;
$white: #ffffff;
.tooltip {
&:hover {
@extend .hover;
}
&_message {
background-color: $blue;
color: $white;
width: 200px;
padding: 30px;
top: 40px;
left: 10px;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12), 0 10px 10px rgba(0, 0, 0, 0.12);
z-index: 1;
}
}
/**
* Utility
*/
.hover {
opacity: 0.5;
cursor: pointer;
}
.d_none { display: none; }
.d_block { display: block; }
.p_relative { position: relative; }
.p_absolute { position: absolute; }
.t_center { text-align: center; }
Js
ここまででHTML, CSSが整いました。
うまく表示されてますでしょうか。
うまく表示されていたらJavascriptの処理を実装します。
Javascriptは、表示・非表示の処理のみで、CSSのクラスを出し分けたい要素に追加・削除を行っています。
「ツールチップ」は、どのページでも使用する可能性がありますよね。
そのため、実際に導入する際は1つのFunctionとしてまとめておくと、使い回すことができるようになるためとても便利です。
今回は、ツールチップに焦点を当てていますので、CSSのクラスの追加・削除部分のみFunction化しています。
$(function() {
$('.tooltip').mouseover(function() {
execAddRemoveClass('.tooltip_message', 'd_block', 'd_none');
})
$('.tooltip').mouseout(function() {
execAddRemoveClass('.tooltip_message', 'd_none', 'd_block');
})
});
function execAddRemoveClass(className, addClassName, removeClassName) {
$(className)
.addClass(addClassName)
.removeClass(removeClassName);
}
jsfiddle
実際の動作をjsfiddleで確認できますので、是非動作させてみてください。
以上でございます。
まとめ
デザインを崩すことなく、ユーザーの操作を補助できるツールチップはとても便利です。
ちょっとしたヒントを表示したいという方の参考にあれば幸いです。