上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




YUIツールチップを利用して、本ブログにツールチップ機能を追加してみます。


YUIツールチップの表示 動作サンプル

下記のリンクの上にマウスカーソルを持っていってください。

☆HTMLでツールチップっぽく見えるtitle属性の場合
Yahoo! JAPANへ遷移します。

YUIツールチップを使用した場合
Googleへ遷移します。

YUIツールチップの表示 ブログへの埋め込み方法

上記サンプルを見て若干ですが、違いがわかりました?ということで、次は埋め込み方法の紹介です。
☆Simple Tooltip Example
http://developer.yahoo.com/yui/examples/container/tooltip.html
※上記を参考にしています。

YUIライブラリの読み込み

☆Yahoo! UI Library: Tooltip
http://developer.yahoo.com/yui/container/tooltip/

上記サイトにアクセスし、ページ中段の下記コードをブログに貼り付けます。
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/container/assets/container.css">

<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<!-- OPTIONAL: Animation (only required if using ContainerEffect) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/animation/animation-min.js"></script>

<!-- Source file -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/container/container-min.js"></script>

YUIツールチップの読み込み設定

<script type="text/javascript">
	YAHOO.namespace("example.container");
	YAHOO.example.container.tt2 = new YAHOO.widget.Tooltip("tooltip", { context:"tooltip1" });
</script>

上記コードを記事内に埋め込みます。
※記事内にJavaScriptのコードを埋め込む場合、記事の編集画面の記事設定内にある「改行の扱い」を「HTMLタグのみ」にしてください。

YUIツールチップの表示

<div class="yui-skin-sam">
	<a href="../../../index.html" id="tooltip1" title="Googleへ遷移します。">Googleへ遷移します。</a>
	</div>
title属性の文字列がツールチップとして表示されます。
id属性の「tooltip1」と埋め込んだJavaScriptの「context:"tooltip1"」を合してください。 少しでも参考になれば応援お願いします。












上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。