tooltip

ツールチップのJavascriptは数多くあるが、クリッカプルマップに対応したものが以外に少ない。

下のサンプルでは、他のJavascriptファイルを必要としないシンプルなTooltipでありながら以下の機能を備える。

表示時のフェードインおよび速度の設定が可能。
表示時の半透明（透明度）が設定可能。
マウス座標に対する表示位置が設定可能。
画像を使わずツールチップの角丸が設定可能。
文字サイズフォントの設定が自由。

スクリプトは以下の通り。

Jquery他、ファイルのダウンロードは不要。使いたいページの<body>内にスクリプトをそのまま丸ごとコピーするだけで簡単に実装できる。

【スクリプト】

JAVASCRIPT

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" >
$(function(){
$('area.tooltip').mouseover(function(e){
$('div#' + e.target.id).css({opacity:0, display:'block'});
$('div#' + e.target.id).fadeTo('normal', 0.5);
});
$('area.tooltip').mousemove(function(e){
$('div#' + e.target.id).css('left', e.pageX + 20);
$('div#' + e.target.id).css('top', e.pageY - 50);
});
$('area.tooltip').mouseout(function(e){
$('div#' + e.target.id).css({display:'none'});
});
});
</script>

CSS

<style>
.tipText {
position: absolute;
padding: 10px;
background-color: #ffffff;
border:1px solid #ccc;
border-width:0px 1px 1px 0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.tipText b {
font-size:20px;
}
</style>

HTML

<img src="bgt.gif" width="234" height="60" border="0" usemap="#Map" style="margin-left: 0px;" />

<map name="Map">
  <area shape="circle" coords="208,28,20" href="javascript:void(0);" onClick="copen(1);" id="tip1" class="tooltip" />
  <area shape="rect" coords="17,28,166,50" href="javascript:void(0);" onClick="copen(2);" id="tip2" class="tooltip" />
</map>

<div id="tip1" class="tipText" style="display:none;"><b>王様</b><br />(さらに容量が拡大されました)</div>
<div id="tip2" class="tipText" style="display:none;"><b>ハッスルサーバー</b><br />(おすすめのサーバーです)</div>

【設定（カスタマイズ）】

フェードイン・透明度

$(‘div#’ + e.target.id).fadeTo(‘normal’, 0.5);

速度は、”fast”、”normal”、”slow”、または完了までの時間をミリ秒

透明度は、0から1。薄いと読み辛くなるから0.5以上が好ましい

表示位置

$(‘div#’ + e.target.id).css(‘left’, e.pageX + 20);

$(‘div#’ + e.target.id).css(‘top’, e.pageY – 50);

上記ではマウスの位置右側20ピクセル離れた位置、上に50ピクセル上がった位置が基点となる。

背景色

background-color: #ffffff;

背景色を濃くした場合は文字色を白にするといい（color: #ffffff;を追加）

影

border:1px solid #ccc;

border-width:0px 1px 1px 0px;

この指定で右側と下側に１ピクセルの線を設定している。

角丸

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

古いブラウザは四角のまま

フォントサイズ

font-size:20px;

<b>以外の部分にサイズを指定したい場合はtipText内に指定する

.tipText {

〜

font-size:14px;

}

【指定方法】

クリッカプルマップ

クリッカプルマップのhrefはjavascript:void(0);とする

onClick=”copen(1);”

カッコ内の数字1から順に振っていく

id=”tip1″の数字も合わせる

この数字が表示される文字のIDに対応する

class=”tooltip”必須

ツールチップ

<div id=”tip1″ class=”tipText” style=”display:none;”><b>王様</b><br />(さらに容量が拡大されました)</div>

id=”tip1″の数字がクリッカプルマップに設定したIDの数字に対応する

class=”tipText”必須

style=”display:none;”で非表示にしておく

クリッカプルマップ対応Jqueryのみでツールチップ

CSS

HTML

【設定（カスタマイズ）】

【指定方法】