SexyTooltips 設定方法
  1. TOP
  2. MEMO
  3. WEB
  4. Sexy ToolTips 設定方法

SexyTooltips 設定方法

SexyTooltips 1.1 とは

　Sexy Tooltips 1.1 とは、標準のツールチップとは違って、とてもSexyです。文字だけではなく、画像も表示させることができます。

Download

　Sexy Tooltips 1.1 は Codes.me の Sexy Tooltips のページの中央あたりの、 Download のとこの http://sexy-tooltips.googlecode.com/files/sexy-tooltips-1.1.zip からダウンロードできます。（2012/1/17 の時点で v1.1）

　ダウンロードできない場合は、こちらから。

　ダウンロードされたファイルはZIP形式になっているので解凍します。解凍すると以下のファイル構成になります。

sexy-tooltips-1.1.zip

./jquery

　　index.html

　　global.css

　　./js

　　　　sexy-tooltips.v1.1.jquery.js

　　　　sexy-tooltips.v1.1.jquery.min.js

　　　　./sexy-tooltips

　　　　　　blue.css

　　　　　　coda.css

　　　　　　hulk.css

　　　　　　msn.css

　　　　　　rosita.css

　　　　　　vista.css

　　　　　　./blue ./coda ./hulk ./msn ./rosita ./vista

　　　　　　　　CSS用の画像　多いので省略

　　./images

　　　　Sample用の画像

 

./mootools

　　./js

　　　　sexy-tooltips.v1.1.mootools.js

　　　　sexy-tooltips.v1.1.mootools.min.js

　　　　./sexy-tooltips

　　　　　　blue.css

　　　　　　coda.css

　　　　　　hulk.css

　　　　　　msn.css

　　　　　　rosita.css

　　　　　　vista.css

　　　　　　./blue ./coda ./hulk ./msn ./rosita ./vista

　　　　　　　　CSS用の画像　多いので省略

　　./images

　　　　Sample用の画像

　この中で必要なのは、JSフォルダの中身です。

Sexy Tooltips の設置

　Sexy Tooltipsは、JQuery でも Mootools でも使うことが出来ます。
　使用する際は、使うライブラリに合った物を使用して下さい。

　ダウンロードしてきた sexy-tooltips-1.1.zip には、JavaScriptには min が付いたものと付いてないものがありますが、どちらを使ってもかまいません。minが付いたものは、圧縮した JavaScript ファイルです。

Mootools の場合
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="js/sexy-tooltips.v1.1.mootools.js"></script>
  <link rel="stylesheet" href="js/sexy-tooltips/coda.css" type="text/css" media="all"/>
JQuery の場合
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="js/sexy-tooltips.v1.1.jquery.js"></script>
  <link rel="stylesheet" href="js/sexy-tooltips/coda.css" type="text/css" media="all"/>

　上記のコードを HTML の <head>内に貼り付けてください。
　パスは自分の環境に合わせて変更してください。

　スタイルシートの変更によってツールチップの外観を変更する事が出来ます。
使用できるスタイルシートは、

  • blue.css
  • coda.css
  • vista.css
  • rosita.css
  • hulk.css
  • msn.css

以上の６種類です。

Sexy Tooltips の使用方法

Mootools用
<script type="text/javascript">
	document.addEvent('domready', function() {
	$('a1').tooltip ('<h1>Title Formating</h1><p>Example of simple tooltip.</p>', {
		width: 200,
		style: 'alert',
		sticky: 1,
		hook: 1
	});
});
</script>
JQuery用
<script type="text/javascript">
	$(document).ready(function(){
	$('a1').tooltip ('<h1>Title Formating</h1><p>Example of simple tooltip.</p>', {
		width: 200,
		style: 'alert',
		sticky: 1,
		hook: 1
	});
});
</script>

$('a1') は id で指定することによって、このように使用できます。

その際に、ツールチップ用のスタイルシートを作っておくとよいでしょう。

ツールチップ用のスタイルシートの例
@charset "utf-8";
/* CSS Document */
.alert h1 {
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:1em;
	font-weight:bold;
	padding-left:18px;
	color:#000;
	margin:0 0 8px 0;
	background-image: url(images/error.png);
	background-repeat: no-repeat;
	background-position: left center;
	border-style: none;
	background-color: transparent;
}
.alert p {
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:0.9em;
	font-weight:normal;
	color:#000;
	margin:0;
	padding:0 0 8px 0;
	line-height:14px;
}
.alert img {
	vertical-align: top;
}
.wiki h1 {
	background:#C4D5E3 url(images/wikiTitle.png) no-repeat scroll 0% 50%;
	padding:5px 0px 5px 80px;
	border:1px solid #C4D5E3;
	font-weight:bold;
	clear: both; 
	font-size: 12px;
	color: #000;
	margin: 0 0 8px 0;
	border-style: none;
}
.wiki p {
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:0.8em;
	font-weight:normal;
	color:#000;
	margin:0;
	padding:0 0 8px 0;
	line-height:1.2em;
}
.wiki .thumbcaption{
	font-size:10px;
}
.wiki .thumbinner{
	background:#D6E6FE;
	margin:4px auto;
	text-align:center;
	padding:5px;
	border:dashed #CCCCCC 1px;
}
.msn {
	opacity:0.90;
}
.msn h1 {
	font-size:1.1em;
	padding-left:18px;
	color:#333333;
	margin:0 0 8px 0;
	border-style: none;
	background-color: transparent;
	background-image: url(images/msn.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
.msn p {
	margin:0;
	padding:8px 0 8px 0;
	line-height:14px;
}
.msn img {
	float: left;
	margin-right:6px;
	padding-bottom:12px
}

url のパスは、環境に合わせて変更して下さい。

Sexy Tooltips の作成

Element.tooltip(content, options)

ツールチップを作成します。

　　content には、表示する内容を記入します。

　　option には、ツールチップのスタイルを入力します。

$('example').tooltip('Hello world.', { mode: 'tl', width: 140, hook: 1 });

Element.tooltip_hide()

ツールチップを非表示にします。

Option

width - 初期値：250
ツールチップの幅の合計：中に表示される部分は、更に15pxずつ小さくなります。

mode - 初期値：auto
このパラメーターは最初の文字が t（上）、b（下）。２番目の文字は l（左）、r（右）です。このパラメーターは２文字で記入するか auto を記入します。
auto の場合は、自動で最適な場所に表示されます。

hook - 初期値：False
マウスにツールチップがくっつきます。

mouse - 初期値：True
アイテムにマウスが乗った時にツールチップを表示します。
使用する場合は click を True にして下さい。

click - 初期値：False
アイテムをクリックした時に、ツールチップを表示します。
使用する場合は mouse を False にして下さい。

sticky - 初期値：False
ツールチップを消すためのクローズボックスを表示します。

style - 初期値：default
自分のスタイルを使う場合に使用します。上のスタイルシートでは、alert、wiki、msn の Style を使用できます。

変数名 初期値 内容
width 250 ツールチップの幅の合計
mode auto ツールチップの位置
hook False マウスに吸い付く
mouse True マウスが乗った時に表示
click False クリックした時に表示
sticky False クローズボックスを表示
style default カスタム用

Event

event tooltipshow()
イベントは表示される時に、解放終了します。

MooTools
$('element').addEvent('tooltipshow', function() {
	alert('tooltip event fired');
});
jQuery
$('element').bind('tooltipshow', function() {
    alert('tooltip event fired');
});

event tooltipshow()
ツールチップが閉じてイベントがトリガされます。

MooTools
$('element').addEvent('tooltiphide', function() {
    alert('tooltip event fired');
});
jQuery
$('element').bind('tooltiphide', function() {
    alert('tooltip event fired');
});

Sample

　エロ本隠しとは、エロ本を隠す側と捜索する側に分かれて双方が攻防を繰り広げるエクストリームスポーツの一つ。エクストリーム･エロ本隠しとも言う。主に家族と同居する男性を中心として行われる。答案隠しに通じるものがあり、時には共催される場合もある。
　一説によると日本人男性の3/8以上が競技に参加した経験があるとも言われる、大変人気の高いエクストリームスポーツである。近年は少子化とデジタルデータの普及によって、多くの人がエロ本隠しinパソコンに移行している。

Style
BACK