今回は、閲覧ユーザーをいちいち別のページに飛ばさずに済む、その場で注意書きなどを「吹き出し」形式で表示させるテクニック（jQuery）です。
当店でも大活用しています。「それについて、もうちょっと詳しく知りたい！」といった要望が出そうな箇所に最適です。
例えば、「この言葉、既存の顧客には常識でも、新規のお客様は知らない人が多いかも知れない。簡単な説明を付けたい。」なんてときにぴったりです。
本来の書き方だとは次のように書いたりします。
ASP（アプリケーション・サービス・プロバイダーの略）といった感じです。
長ったらしいですよね。そこで本文中では、ASPとだけ表示してマウスを乗せることで吹き出しで説明が出てくるといったものです。
jQueryの基本
jQueryの使い方の基本は、「呼び出す」ということです。
今回のようなツールのJava Scriptなどのファイルを、任意のディレクトリに置いて、それを使うページに「呼び出す。」だけ。
プログラミングの知識も不要。
Java Scriptの知識も不要。
基本コピペだけで済みます。
ナイスな「niceTooltip」を使う
吹き出し系のJS（Java Script）はいくつかありますが、このナイスなやつは、ブラウザの右端で表示させようとしたときも、画面からはみ出ることなく上手に表示してくれます。
SimpleTooltipといったものもありますが、吹き出しっぽいデザインは良しとしても、吹き出す場所によってはブラウザからはみ出てしまって見えなくなるというデメリットがあります。
Tooltipは仕組みはどれも同じなので、このナイスを試して、お好みで他のツールチップを楽しむのも楽しいかと思います。
jQueryを呼び込む
jQueryを使った便利テクニックを導入するには、まずは【ステップ１】必要ファイルをサーバーにアップロードする。
jQueryがまだの場合は、これは一回入れるだけで、次回からは省けます。
そして今回はniceTooltipのjsファイルをアップロードしておきます。
さて、アップロードする場所は、それぞれのショップサーブのサーバーにFTP接続をして、「docs」内に「js」というディレクトリ（フォルダ）を作って、その中にJSファイルを収納していくと良いでしょう。
もちろん、他でも構いませんが、ここでは、「docs/js」として話を進めます。
【ステップ２】は、ページの<head>～</head>に「jQuery」と「jsファイル（niceTooltip」を読み込みむタグを書きます。記述方法は次のとおりです。
<script type="text/javascript" src="/js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="/js/nicetooltip.jp"></script>ショップサーブ（例）の管理画面から、「デザイン設定」→「HTMLのカスタマイズ」→「headタグへの追記」のところから挿入します。
必要箇所の編集
ステップ１、ステップ２までは、全店共通のやり方ですが、【ステップ３】は、自社のサイトのコンテンツに合わせて編集していきます。
まず、吹き出しを出したい箇所に「id」を振っていきます。
例えば、<span id=”miki”＞ミキちゃん</span>という感じです。
文字に装飾をつける場合は<span id=”tarou” style=”border-bottom: dotted 2px #87CEFA;”>などとします。→ミキちゃん
そして、この「id=tarou」の吹き出し内容は、次のJava scriptを任意の場所に埋め込みます。
これは、各ページごと任意の場所です。オレンジのグリーンが、1つの吹き出しのセットです。必要な数追加することができます。
<script type=”text/javascript”>
<!–
$(function(){
$(‘#miki’).niceTooltip({
HTML: “ミキちゃんは、うちで飼っている体長50ｍのアフリカオオトカゲのことです。”
});
$(‘#sari’).niceTooltip({
HTML: “サリちゃんは、隣の家で飼育されているイノシシの名前です。”
});
–>
</script>
動作サンプルは次の通り。
我が家のミキちゃんと、お隣のサリちゃんはお友達です。