Tooltipsterの使い方メモ（jQueryプラグイン）
jQueryプラグインのTooltipsterを使う機会があったので、どんな感じなのか試しに作成したコードを忘れないようにメモとして残しておきます。
目次
- コード
- 実際の動作
- 参考リンク
コード
コードは以下の通りです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/tooltipster.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.min.js"></script>
<script>
$(document).ready(function() {
initializeTooltip();
});
function initializeTooltip(){
var initMessage = "<div>全角文字を入力してください</div>";
$('.tooltipster-example').tooltipster({
position: 'right',
animation: 'fade',
updateAnimation: null,
contentAsHTML: true,
content: initMessage,
trigger: 'custom'
}).focus(function(){
// ツールチップの表示
$(this).tooltipster('show');
}).blur(function(){
// ツールチップの非表示
$(this).tooltipster('hide');
}).keyup(function(){
if(!$(this).val()){
// 未入力なので初期メッセージを表示
$(this).tooltipster('content', initMessage);
}else{
// 入力チェック
var res = validateZenkaku($(this).val());
if(res.success){
$(this).tooltipster('content', "<div>入力OK（" + res.message + "）</div>");
}else{
$(this).tooltipster('content', "<div>入力NG（" + res.message + "）</div>");
}
}
});
}
function validateZenkaku(str){
var success = true;
var message = "";
// 入力された文字を1文字ずつチェック
var arr = str.split("");
arr.forEach(function(s, i){
if(s.match(/[^\x00-\x7E]+/g)){
message += s;
}else{
message += "<span style='color:red;'>" + s + "</span>"
success = false;
}
});
return { success: success, message: message };
}
</script>
</head>
<body>
<input type="text" class="tooltipster-example"/>
</body>
</html>
フォーカスインとアウトででツールチップの表示／非表示を切り替えて、文字が入力される度に毎回入力チェックを実行しています。
ツールチップに表示する文字列は、入力の状態によって内容を切り替えています。