Search

prototype.jsベースツールチップ

  1. CoolTips〔半透明の角丸ツールチップ、scriptaculous.js使用〕
  2. HelpBalloon.js〔動的コンテンツも表示可能なぷっくりとしたヘルプバルーン、scriptaculous.js使用〕
  3. Tooltips.js v0.3〔ツールチップ、scriptaculous.js使用〕

CoolTips
半透明の角丸ツールチップ、scriptaculous.js使用

unknown

CoolTips v1.0

Firefox、Opera、Safari、IE 6、IE 7
［CSS］tooltips.css
［JS］prototype.js v1.5.0、scriptaculous.js v1.7.0（builder.js、effects.js）、tooltip.js

半透明の角丸ツールチップを表示するライブラリ。 指定したクラス名の要素にマウスオーバーした時に、その要素のtitle属性の内容がツールチップ表示されます。

設置イメージ設置イメージ
HEAD 
<!-- JS -->
<script type="text/javascript" src="prototype-1.5.0.js" charset="utf-8"></script>
<script type="text/javascript" src="scriptaculous.js?load=builder,effects" charset="utf-8"></script>
<script type="text/javascript" src="tooltips.js" charset="utf-8"></script>
<!-- CSS -->
<link rel="stylesheet" href="tooltips.css" media="screen" charset="utf-8" />
HTML 
<ul>
  <li><a href="#" title="ツールチップの内容" class="help"">テキスト</a></li>
  <li><p title="ツールチップの内容" class="help">テキスト</p></li>
</ul>
<form action="#" method="get">
  <fieldset>
    <legend>登録情報</legend>
    <p>
      <label for="user_name">名前：</label>
      <input class="help" type="text" name="user_name" id="user_name" size="20" maxlength="256" title="ツールチップの内容" />
    </p>
    <p>
      <label for="user_age">年齢：</label>
      <input type="text" class="help" name="user_age" id="user_age" size="3" maxlength="3"  title="ツールチップの内容" /> 歳
    </p>
    </fieldset>
</form>

<script type="text/javascript" charset="utf-8">
  $$("ul .help").each( function(link) {
    new Tooltip(link);
  });
  $$("form input.help").each( function(input) {
    new Tooltip(input, {
      backgroundColor: "#fc9",
      borderColor: "#C96",
      textColor: "#000",
      textShadowColor: "#fff"
    });
  });
</script>
CoolTipsの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>CoolTips v1.0 | 設置サンプル</title>
        <script type="text/javascript" src="/content/lib/prototype/prototype-1.5.0.js"></script>
        <script type="text/javascript" src="/content/lib/scriptaculous_v170/scriptaculous.js?load=builder,effects"></script>
        <script type="text/javascript" src="/content/lib/cooltips/tooltips.js"></script>
        <link rel="stylesheet" href="/content/lib/global.css" />
        <link rel="stylesheet" href="/content/lib/cooltips/tooltips.css" media="screen" />
    </head>
    <body>
        <div id="wrap">
            <h1><a href="http://www.wildbit.com/labs/cooltips/">CoolTips v1.0</a> | 設置サンプル</h1>
            <p>▼ul要素内のhelpクラスを指定した要素にマウスオーバーすると、その要素のtitle属性に指定した内容をツールチップ表示します。</p>
            <ul>
                <li><a href="#" title="a要素のtitle属性に指定した内容をツールチップ表示しています" class="help">マウスオーバーしてください（a要素）</a></li>
                <li><p title="p要素のtitle属性に指定した内容をツールチップ表示しています。" class="help">マウスオーバーしてください（p要素）</p></li>
            </ul>
            <form action="#" method="get">
                <fieldset>
                    <legend>登録情報</legend>
                    <p><label for="user_name">名前：</label><input type="text" name="user_name" id="user_name" size="20" maxlength="256" title="あなたの「名前」を入力してください" class="help" /></p>
                    <p><label for="user_age">年齢：</label><input type="text" name="user_age" id="user_age" size="3" maxlength="3"  title="あなたの「年齢」を入力してください" class="help" />&nbsp;歳</p>
                </fieldset>
            </form>
            <script type="text/javascript">
                $$("ul .help").each( function(link) {
                    new Tooltip(link);
                });
                $$("form input.help").each( function(input) {
                    new Tooltip(input, {backgroundColor: "#fc9", borderColor: "#c96", textColor: "#000", textShadowColor: "#fff"});
                });
            </script>
        </div>
    </body>
</html>

HelpBalloon.js
動的コンテンツも表示可能なぷっくりとしたヘルプバルーン、scriptaculous.js使用

unknown

Help-Balloons

MIT
prototype.js v1.6.0.3、prototype.improvements.js、scriptaculous.js v1.8、HelpBalloon.js

ヘルプバルーンを表示するJSライブラリです。 Ajaxで読み込んだXMLや指定したURLのHTMLファイルをバルーン内のコンテンツとして表示したり、 Ajaxを使わずにHTMLページ上で指定したタイトルとコンテンツをバルーン内に表示することもできます。

バルーン内に表示するコンテンツは、HTMLタグが使用できます。 XMLの場合はコンテンツの内容を定義しているcontent要素内の文字列を<![CDATA[～]]>で括る必要があります。 バルーンからテキストがあふれる場合は、スクロールバーが表示されます。

設置イメージ設置イメージ
HEAD 
<script type="text/javascript" src="prototype-1.6.0.3.js" charset="utf-8"></script>
<script type="text/javascript" src="prototype.improvements.js" charset="utf-8"></script>
<script type="text/javascript" src="scriptaculous.js" charset="utf-8"></script>
<script type="text/javascript" src="HelpBalloon.js" charset="utf-8"></script>
Help-Balloonsの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>AJAX-enabled Help-Balloons | 設置サンプル</title>
        <link rel="stylesheet" href="/content/lib/global.css" />
        <script type="text/javascript" src="/content/lib/prototype/prototype-1.6.0.3.js"></script>
        <script type="text/javascript" src="/content/lib/prototype/prototype.improvements.js"></script>
        <script type="text/javascript" src="/content/lib/scriptaculous/scriptaculous.js"></script>
        <script type="text/javascript" src="/content/lib/help-balloons/HelpBalloon.js"></script>
        <style type="text/css">
            span.i, #myContainer { float:left; width:14px; height:14px; margin:5px; padding:0; display:block; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://www.beauscott.com/2006/08/19/ajax-enabled-help-balloons/'>AJAX-enabled Help-Balloons</a> | 設置サンプル</h1>
            <p>▼情報アイコンをクリックするとバルーン表示します。</p>
            <!-- Static Balloon -->
            <h2>
                <span class="i"><script type="text/javascript">var hb1 = new HelpBalloon({title:'Ajaxなしのバルーン',content:'<p><img src="/content/img/dog_mini.gif" align="right" alt="Dog" />Ajaxを使わずにバルーンを表示する例です。バルーンの「タイトル」と「コンテンツ」に表示する文字列はページ内で指定します。HTMLタグも使用できます。<br clear="all" /><\/p>'});</script></span>
                Ajaxを使わないでバルーン表示
            </h2>
            <!-- XML Balloon -->
            <h2>
                <span class="i"><script type="text/javascript">var hb2 = new HelpBalloon({dataURL:'/content/lib/help-balloons/test.xml'});</script></span>
                XMLを読み込んでバルーンに表示する
            </h2>
            <!-- HTML Balloon -->
            <h2>
                <span class="i"><script type="text/javascript">var hb4 = new HelpBalloon({dataURL:'/content/lib/help-balloons/test.htm'/*URL to target HTML Document*/});</script></span>
                HTMLを読み込んでバルーンに表示する
            </h2>
            <h2>
                <span class="i"><script type="text/javascript">var hb5 = new HelpBalloon({title:'ボタン表示切替バルーン',content:'ページ上に表示切替ボタンを設置するタイプです。［非表示］ボタンをクリックしても、バルーンの右上にある×ボタンでもバルーンを閉じられます。'});</script></span>
                ボタンでバルーンの表示・非表示を切替
            </h2>
            <button id="btnShow" onclick="hb5.show();">表示</button>
            <!-- Prototype Event.observe method -->
            <button id="btnHide">非表示</button>
            <script type="text/javascript">Event.observe('btnHide', 'click', hb5.hide.bind(hb5));</script>
            <h2>
                <div id="myContainer"></div>
                <script type="text/javascript">
                    var hb6 = new HelpBalloon({
                        returnElement:true,
                        title:'DOMノード追加型バルーン',
                        content:'バルーンアイコンをappendChildメソッドを使ってDOMノードに追加する例です。バルーンアイコンをクリックするとバルーンが表示されます。'
                    });
                    $('myContainer').appendChild(hb6._elements.icon);
                </script>
                バルーンアイコンをDOMノードに追加して表示
            </h2>
        </div>
    </body>
</html>

Tooltips.js v0.3
ツールチップ、scriptaculous.js使用

unknown

Tooltips.js v0.3

MIT
prototype.js v1.6.0.3、scriptaculous.js v1.8、getElementsBySelector.js、tooltips.js

リンクにマウスオーバーすると、ツールチップをバルーン表示するライブラリです。 ツールチップには、HTML文を指定可能です。

設置イメージ設置イメージ
HEAD 
<script type="text/javascript">
function debug(msg) {
  var d = $('debug');
  if (d) d.innerHTML = msg + "<br>" + d.innerHTML;
}
</script>
<script type="text/javascript" src="prototype-1.6.0.3.js" charset="utf-8"></script>
<script type="text/javascript" src="getElementsBySelector.js" charset="utf-8"></script>
<script type="text/javascript" src="scriptaculous.js" charset="utf-8"></script>
<script type="text/javascript" src="tooltips.js" charset="utf-8"></script>
<script type="text/javascript">
  Tooltips.activateOnLoad();
  ActionHints.activateOnLoad();
  SectionTriggers.activateOnLoad();
</script>
<style type="text/css">
  .tooltipTrigger { cursor:help; }
  .tooltip, .actionHint { border:1px solid #89c0de; background-color:#fff; font-family:Tahoma, Verdana, Sans-Serif; font-size:11px; color:#000; width:300px; padding:2px 4px; z-index:100; }
  .tooltip h4, .actionHint h4 { font-size:11px; background-color:#89c0de; margin:-2px -4px 3px -4px; padding:2px 4px; }
  .tooltip p, actionHint p { margin:0; }
  .actionHint { width:140px; }
</style>
HTML 
/*
下記のように、a要素（リンクテキスト）およびdiv要素（バルーン表示する部分）
の属性に命名規則があります。オレンジ色の部分に任意の名前を指定して使用する
ことができます。
*/
<a href="#tooltipUI" class="tooltipTrigger" id="tooltipTriggerUI">テキスト</a>
<div class="tooltip" id="tooltipTriggerUIPopUp">ツールチップの内容</div>
Tooltips.js v0.3の設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>Tooltips.js v0.3 | 設置サンプル</title>
        <link rel="stylesheet" href="/content/lib/global.css" />
        <script type="text/javascript">
            function debug(msg) {
                var d = $('debug');
                if (d) d.innerHTML = msg + "<br>" + d.innerHTML;
            }
        </script>
        <script type="text/javascript" src="/content/lib/prototype/prototype-1.6.0.3.js"></script>
        <script type="text/javascript" src="/content/lib/tooltips/getElementsBySelector.js"></script>
        <script type="text/javascript" src="/content/lib/scriptaculous/scriptaculous.js"></script>
        <script type="text/javascript" src="/content/lib/tooltips/tooltips.js"></script>
        <script type="text/javascript">
            Tooltips.activateOnLoad();
            ActionHints.activateOnLoad();
            SectionTriggers.activateOnLoad();
        </script>
        <style type="text/css">
            .tooltipTrigger { cursor:help; }
            .tooltip, .actionHint { border:1px solid #89c0de; background-color:#fff; font-family:Tahoma, Verdana, Sans-Serif; font-size:11px; color:#000; width:300px; padding:2px 4px; z-index:100; }
            .tooltip h4, .actionHint h4 { font-size:11px; background-color:#89c0de; margin:-2px -4px 3px -4px; padding:2px 4px; }
            .tooltip p, actionHint p { margin:0; }
            .actionHint { width:140px; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href="http://static.twoday.net/matsblog/stuff/Tooltip/Tooltip.Demo.html">Tooltips.js v0.3</a> | 設置サンプル</h1>
            <p>▼リンクにマウスオーバーするとツールチップを表示します。</p>
            <blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
                <dl>
                    <dt>Ajax</dt>
                        <dd>
                            <p>Ajax（アジャックス、エイジャックス）は、<a href="#tooltipUI" class="tooltipTrigger" id="tooltipTriggerUI">ユーザーインターフェース</a>構築技術の総称。
                            <a href="#tooltipTwo" class="tooltipTrigger" id="tooltipTriggerXML">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、
                            通信結果に応じて<a href="#tooltipDHTML" class="tooltipTrigger" id="tooltipTriggerDHTML">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
                            <p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ XML の略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
                            <cite><a href="http://ja.wikipedia.org/wiki/Ajax">出典:フリー百科事典『ウィキペディア（Wikipedia）』</a></cite>
                        </dd>
                </dl>
            </blockquote>
            <div class="tooltip" id="tooltipTriggerUIPopUp">
                <h4>ユーザーインターフェース</h4>
                <p><img src="/content/img/ajax/info.png" style="vertical-align:middle" />機械、特にコンピュータとその機械の利用者（通常は人間）の間での情報をやりとりするためのインタフェース。</p>
            </div>
            <div class="tooltip" id="tooltipTriggerXMLPopUp">
                <h4>XMLHttpRequest</h4>
                <p>JavaScriptなどの<strong>ウェブブラウザ搭載のスクリプト言語</strong>で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）。</p>
            </div>
            <div class="tooltip" id="tooltipTriggerDHTMLPopUp">
                <h4>DHTML</h4>
                <p>DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。</p>
            </div>
            <p>▼ボタンをクリックすると、ツールチップが表示されます。</p>
            <p><button onclick="$('info').value+='ボタンがクリックされました\n'" class="actionHintTrigger" id="actionHintTriggerOne">クリック</button></p>
            <p>▼ボタンをクリックすると、アクション情報がデバッグ表示されます。</p>
            <p><textarea id="info" cols="50" rows="5"></textarea></p>
            <div class="actionHint" id="actionHintTriggerOnePopUp">
            <h4>アクション情報</h4>
                <p>ボタンをクリックすると、アクション情報がデバッグ表示されます。</p>
            </div>
        </div>
    </body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

©2025 PHP & JavaScript Room All Rights Reserved.

pagetop