Search

jQuery pluginツールチップ

  1. clueTip : A jQuery Plugin〔外部ファイルを読み込んだり、いろいろなツールチップが実装できるjQueryプラグイン〕
  2. Coda Popup Bubbles〔マウスオーバーで吹き出しをポップアップ表示〕
  3. Create a jQuery Popup Bubble〔マウスオーバーで吹き出しをポップアップ表示〕
  4. Create a Simple CSS + Javascript Tooltip with jQuery〔jQueryを使用して、CSS+JavaScriptでつくるシンプルなツールチップ〕
  5. Easiest Tooltip and Image Preview Using jQuery〔シンプルなツールチップ〕
  6. Example of simple jQuery tooltip〔シンプルな吹き出し風のツールチップ〕
  7. jQuery InputHintBox〔フォーム要素をクリックするとヒントテキストをツールチップ表示〕
  8. jQuery plugin: Tooltip〔リンク先情報をツールチップ表示〕
  9. jQuery Tooltip @ jQuery TOOLS〔吹き出し風のツールチップ〕
  10. jTip〔入力要素の入力ヒントや外部HTMLファイルを読み込んでツールチップ表示〕
  11. Link Control〔リンク先の開き方をエンドユーザーに選択させるツールチップを表示〕
  12. mopTip〔デザインがおしゃれなバルーン表示ライブラリ〕
  13. Side Navigation Tooltip / Popup Bubble〔垂直ナビゲーションにマウスオーバーすると右サイドに吹き出し表示〕
  14. tinyTips〔超軽量の吹き出し風ツールチップ〕
  15. tipsy〔東西南北方向にツールチップ表示〕
  16. Build a Better Tooltip with jQuery Awesomeness〔半透明のツールチップ〕

clueTip : A jQuery Plugin
外部ファイルを読み込んだり、いろいろなツールチップが実装できるjQueryプラグイン

unknown

clueTip : A jQuery Plugin

MIT／GPL
［CSS］jquery.cluetip.css
［JS］jquery.js v1.2.6、jquery.dimensions.js、jquery.hoverIntent.js、jquery.cluetip.js

外部ファイルを読み込んだり、いろいろなツールチップが実装できるjQueryプラグイン。 ツールチップのレイアウトや表示位置など、パラメータをいじるだけで簡単に変更できます。

設置イメージ設置イメージ
HEAD 
<!-- JS -->
<script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.dimensions.js" type="text/javascript"></script>
<script src="jquery.hoverIntent.js" type="text/javascript"></script> <!-- optional -->
<script src="jquery.cluetip.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
  /* Default Style */
  $('a.title').cluetip({splitTitle: '|'});
  /* jTip Theme */
  $('span[@title]').css({color:'#0075d9',borderBottom: '1px solid #0075d9'}).cluetip({splitTitle: '|',arrows: true,dropShadow: false,cluetipClass: 'jtip'});
  /* Rounded Corners Theme */
  $('a.round').cluetip({splitTitle: '|', dropShadow: false, cluetipClass: 'rounded', positionBy: 'mouse'});
});
</script>
<!-- CSS -->
<link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />
HTML 
<!-- Default Style -->
<a href="リンク先URL" class="title" title="タイトル|ツールチップの内容">タイトル</a>
<span class='green'><!-- jTip Theme -->
<span title="タイトル|ツールチップの内容">タイトル</span>
<!-- Rounded Corners Theme -->
<a href="リンク先URL" class="round" title="タイトル|ツールチップの内容">タイトル</a>
clueTip : A jQuery Pluginの設置サンプルサンプルを見る
<!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>clueTip : A jQuery Plugin | 設置サンプル</title>
        <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script src="/content/lib/cluetip-0.9.8/jquery.dimensions.js" type="text/javascript"></script>
        <script src="/content/lib/cluetip-0.9.8/jquery.hoverIntent.js" type="text/javascript"></script> <!-- optional -->
        <script src="/content/lib/cluetip-0.9.8/jquery.cluetip.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $('a.title').cluetip({splitTitle: '|'});
            $('a.round').cluetip({splitTitle: '|', dropShadow: false, cluetipClass: 'rounded', positionBy: 'mouse'});
            $('span[@title]').css({color:'#0075d9',borderBottom: '1px solid #0075d9'}).cluetip({splitTitle: '|',arrows: true,dropShadow: false,cluetipClass: 'jtip'});
        });
        </script>
        <link rel="stylesheet" href="/content/lib/cluetip-0.9.8/jquery.cluetip.css" type="text/css" />
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://plugins.learningjquery.com/cluetip/'>clueTip : A jQuery Plugin</a> | 設置サンプル</h1>
            <p>▼リンクにマウスオーバーするとツールチップが表示されます。</p>
            <h2>Default Style</h2>
            <blockquote>
                <dl>
                    <dt>Ajax</dt>
                    <dd>
                        <p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" class="title" title="XMLHttpRequest|JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、
                            通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" class="title" title="DHTML|DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
                            <p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ <a href="http://ja.wikipedia.org/wiki/Extensible_Markup_Language" class="title" title="XML|Extensible Markup Language （エクステンシブルマークアップランゲージ）。">XML</a>の略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
                            <cite><a href="http://ja.wikipedia.org/wiki/Ajax" class="title" title="Ajax From Wikipedia|http://ja.wikipedia.org/wiki/Ajax"><strong>Ajax</strong> From Wikipedia</a></cite>
                        </dd>
                </dl>
            </blockquote>
            <h2>jTip Theme</h2>
            <blockquote>
                <dl>
                    <dt>Ajax</dt>
                    <dd>
                        <p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<span title="XMLHttpRequest|JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）">XMLHttpRequest</span>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、
                            通信結果に応じて<span title="DHTML|DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。">DHTML</span>で動的にページの一部を書き換えるというアプローチを取る。</p>
                            <p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ <span title="XML|Extensible Markup Language （エクステンシブルマークアップランゲージ）。">XML</span>の略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
                            <cite><a href="http://ja.wikipedia.org/wiki/Ajax"><span title="Ajax From Wikipedia|http://ja.wikipedia.org/wiki/Ajax"><strong>Ajax</strong> From Wikipedia</span></a></cite>
                        </dd>
                </dl>
            </blockquote>
            <h2>Rounded Corners Theme</h2>
            <blockquote>
                <dl>
                    <dt>Ajax</dt>
                    <dd>
                        <p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" class="round" title="XMLHttpRequest|JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、
                            通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" class="round" title="DHTML|DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
                            <p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ <a href="http://ja.wikipedia.org/wiki/Extensible_Markup_Language" class="round" title="XML|Extensible Markup Language （エクステンシブルマークアップランゲージ）。">XML</a>の略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
                            <cite><a href="http://ja.wikipedia.org/wiki/Ajax" class="round" title="Ajax From Wikipedia|http://ja.wikipedia.org/wiki/Ajax"><strong>Ajax</strong> From Wikipedia</a></cite>
                        </dd>
                </dl>
            </blockquote>
        </div>
    </body>
</html>

Coda Popup Bubbles
マウスオーバーで吹き出しをポップアップ表示

unknown

Coda Popup Bubbles

jquery.js

ファイルのダウンロードリンクに最適！ ファイル情報を吹き出しで表示するというアイデアがいいですね。 画像にマウスオーバーすると、ダウンロードするファイルの情報が吹き出しされます。

設置イメージ設置イメージ
Coda Popup Bubblesの設置サンプルサンプルを見る
<!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>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css">
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(function () {
            $('.bubbleInfo').each(function () {
                var distance = 10;
                var time = 250;
                var hideDelay = 500;
                var hideDelayTimer = null;
                var beingShown = false;
                var shown = false;
                var trigger = $('.trigger', this);
                var info = $('.popup', this).css('opacity', 0);
                $([trigger.get(0), info.get(0)]).mouseover(function () {
                    if (hideDelayTimer) clearTimeout(hideDelayTimer);
                    if (beingShown || shown) {
                        // don't trigger the animation again
                        return;
                    } else {
                        // reset position of info box
                        beingShown = true;
                        info.css({
                            top: -90,
                            left: -33,
                            display: 'block'
                        }).animate({
                            top: '-=' + distance + 'px',
                            opacity: 1
                        }, time, 'swing', function() {
                            beingShown = false;
                            shown = true;
                        });
                    }
                    return false;
                }).mouseout(function () {
                    if (hideDelayTimer) clearTimeout(hideDelayTimer);
                    hideDelayTimer = setTimeout(function () {
                        hideDelayTimer = null;
                        info.animate({
                            top: '-=' + distance + 'px',
                            opacity: 0
                        }, time, 'swing', function () {
                            shown = false;
                            info.css('display', 'none');
                        });
                    }, hideDelay);
                    return false;
                });
            });
        });
        </script>
        <!-- CSS -->
        <style type="text/css">
            .bubbleInfo { position:relative; width:500px; height:200px; top:100px; left:50px; }
            .bubbleInfo,
            .bubbleInfo * { margin:0; padding:0; }
            .trigger { position:absolute; }
            /* Bubble pop-up */
            .popup { position:absolute; display:none; z-index:50; border-collapse:collapse; }
            .popup td.corner { height:15px; width:19px; }
            .popup td#topleft { background-image:url(/content/img/ajax/coda-popup-bubbles/bubble-1.png); }
            .popup td.top { background-image:url(/content/img/ajax/coda-popup-bubbles/bubble-2.png); }
            .popup td#topright { background-image:url(/content/img/ajax/coda-popup-bubbles/bubble-3.png); }
            .popup td.left { background-image:url(/content/img/ajax/coda-popup-bubbles/bubble-4.png); }
            .popup td.right { background-image:url(/content/img/ajax/coda-popup-bubbles/bubble-5.png); }
            .popup td#bottomleft { background-image:url(/content/img/ajax/coda-popup-bubbles/bubble-6.png); }
            .popup td.bottom { background-image:url(/content/img/ajax/coda-popup-bubbles/bubble-7.png); text-align:center;}
            .popup td.bottom img { display:block; margin:0 auto; }
            .popup td#bottomright { background-image:url(/content/img/ajax/coda-popup-bubbles/bubble-8.png); }
            .popup table.popup-contents { font-size:12px; line-height:1.2em; background-color:#fff; color:#666; font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif; }
            table.popup-contents th { text-align:right; text-transform:lowercase; }
            table.popup-contents td { text-align:left; }
            tr#release-notes th { text-align:left; text-indent:-9999px; background:url(/content/img/ajax/coda-popup-bubbles/starburst.gif) no-repeat top right; height:17px; }
            tr#release-notes td a { color:#333; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照：　<a href='http://jqueryfordesigners.com/coda-popup-bubbles/'>Coda Popup Bubbles</a></p>
            <p>▼画像にマウスオーバーすると、ダウンロードするファイルの情報が吹き出しされます。</p>
<!-- CODE -->
            <div class="bubbleInfo">
                <div>
                    <a href="hoge.zip" onclick="return false;"><img class="trigger" src="/content/img/ajax/zip.png" id="download" /></a>
                </div>
                <table id="dpop" class="popup">
                    <tbody>
                        <tr>
                            <td id="topleft" class="corner"></td>
                            <td class="top"></td>
                            <td id="topright" class="corner"></td>
                        </tr>
                        <tr>
                            <td class="left"></td>
                            <td><table class="popup-contents">
                                <tbody><tr>
                                    <th>File:</th>
                                    <td>coda 1.1.zip</td>
                                </tr>
                                <tr>
                                    <th>Date:</th>
                                    <td>11/30/07</td>
                                </tr>
                                <tr>
                                    <th>Size:</th>
                                    <td>17 MB</td>
                                </tr>
                                <tr>
                                    <th>Req:</th>
                                    <td>Mac OS X 10.4+</td>
                                </tr>                        
                                <tr id="release-notes">
                                    <th>Read the release notes:</th>
                                    <td><a title="Read the release notes" href="releasenote.html" onclick="return false;">リリースノート</a></td>
                                </tr>
                            </tbody></table>
                            </td>
                            <td class="right"></td>
                        </tr>
                        <tr>
                            <td class="corner" id="bottomleft"></td>
                            <td class="bottom"><img width="30" height="29" alt="popup tail" src="/content/img/ajax/coda-popup-bubbles/bubble-tail2.png"/></td>
                            <td id="bottomright" class="corner"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

Create a jQuery Popup Bubble
マウスオーバーで吹き出しをポップアップ表示

2008/11/16

Create a jQuery Popup Bubble

jquery.js v1.2.6

jQueryを使用して、RSSリンクにマウスオーバーした時に吹き出しをポップアップ表示する方法が掲載されています。

設置イメージ設置イメージ
HEAD 
<!-- JS -->
<script type="text/javascript" src="jquery-1.2.6.min.js" charset="utf-8"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $(".rss-popup a").hover(function() {
      $(this).next("em").animate({opacity:"show", top:"-60"}, "slow");
    },
    function(){
      $(this).next("em").animate({opacity:"hide", top:"-70"}, "fast");
    });
  });
</script>
<!-- CSS -->
<style type="text/css">
  .rss-popup { margin:100px 0; padding:0; width:100px; list-style:none; position:relative; }
  .rss-popup em { background:url("/content/img/ajax/popupbubble.png") no-repeat; width:100px; height:49px; position:absolute; top:-70px; left:-0px; text-align:center; text-indent:-9999px; z-index:2; display:none; }
  #rss-icon { width:42px; height:42px; background:url("/content/img/ajax/popupbubble_icon.png") no-repeat 0 0; text-indent:-9999px; margin:0 auto; display:block; }
</style>
HTML 
<div class="rss-popup">
  <a href="feed-link" id="rss-icon">RSS Feed</a>
  <em>Subscribe to our RSS Feed</em>  
</div>
Create a jQuery Popup Bubbleの設置サンプルサンプルを見る
<!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>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $(".rss-popup a").hover(function() {
                    $(this).next("em").animate({opacity:"show", top:"-60"}, "slow");
                },
                function(){
                    $(this).next("em").animate({opacity:"hide", top:"-70"}, "fast");
                });
            });
           </script>
           <style type="text/css">
               body { background-color:#fff; }
            .rss-popup { margin:100px 0; padding:0; width:100px; list-style:none; position:relative; }
            .rss-popup em { background:url(/content/img/ajax/popupbubble.png) no-repeat; width:100px; height:49px; position:absolute; top:-70px; left:-0px; text-align:center; text-indent:-9999px; z-index:2; display:none; }
            #rss-icon { width:42px; height:42px; background:url(/content/img/ajax/popupbubble_icon.png) no-repeat 0 0; text-indent:-9999px; margin:0 auto; display:block; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h2>
            <p>参照：<a href='http://www.dvq.co.nz/web-design/create-a-jquery-popup-bubble-effect/'>Create a jQuery Popup Bubble</a></p>
            <p>▼RSSアイコンにマウスオーバーすると、吹き出しがポップアップ表示されます。</p>
            <div class="rss-popup">
                <a href="feed-link" id="rss-icon">RSS Feed</a>
                <em>Subscribe to our RSS Feed</em>  
            </div>
        </div>
    </body>
</html>

Create a Simple CSS + Javascript Tooltip with jQuery
jQueryを使用して、CSS+JavaScriptでつくるシンプルなツールチップ

2009/3/28

Create a Simple CSS + Javascript Tooltip with jQuery

jquery.js

jQueryを使用して、CSS＋JavaScriptでシンプルなツールチップを作成する方法が掲載されています。

角丸ツールチップ部分には画像を使用しています。 ツールチップ表示したいa要素のrel属性に「tooltip」を指定し、title属性にツールチップ内に表示する内容を指定します（HTMLタグ使用可）。

設置イメージ設置イメージ
Create a Simple CSS + Javascript Tooltip with jQueryの設置サンプルサンプルを見る
<!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>Create a Simple CSS + Javascript Tooltip with jQuery | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                //Select all anchor tag with rel set to tooltip
                $('a[rel=tooltip]').mouseover(function(e) {
                    
                    //Grab the title attribute's value and assign it to a variable
                    var tip = $(this).attr('title');    
                    
                    //Remove the title attribute's to avoid the native tooltip from the browser
                    $(this).attr('title','');
                    
                    //Append the tooltip template and its value
                    $(this).append('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody">' + tip + '</div><div class="tipFooter"></div></div>');        
                            
                    //Show the tooltip with faceIn effect
                    $('#tooltip').fadeIn('500');
                    $('#tooltip').fadeTo('10',0.9);
                    
                }).mousemove(function(e) {
                    //Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
                    $('#tooltip').css('top', e.pageY + 10 );
                    $('#tooltip').css('left', e.pageX + 20 );
                    
                }).mouseout(function() {
                    //Put back the title attribute's value
                    $(this).attr('title',$('.tipBody').html());
                    //Remove the appended tooltip template
                    $(this).children('div#tooltip').remove();
                    
                });
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            div.para { width:500px; }
            div.para a { font-weight:bold; text-decoration:underline; cursor:pointer; }
            /* Tooltip */
            #tooltip { position:absolute; z-index:9999; color:#fff; font-size:10px; width:180px; }
            #tooltip .tipHeader { height:8px; background:url(/content/img/ajax/tipHeader.gif) no-repeat; }
            #tooltip .tipBody { background-color:#000; padding:5px 5px 5px 15px; }
            #tooltip .tipFooter { height:8px; background:url(/content/img/ajax/tipFooter.gif) no-repeat; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://www.queness.com/post/92/create-a-simple-cssjavascript-tooltip-with-jquery'>Create a Simple CSS + Javascript Tooltip with jQuery</a> | 設置サンプル</h1>
            <p>▼リンクにマウスオーバーするとツールチップが表示されます。</p>
<!-- CODE -->
            <div class="para">
                <a rel="tooltip" title="<img src='/content/img/mythumb.png' width='150' height='150' />">「PHP & JavaScript Room」</a>は、
                <a rel="tooltip" title="<strong>Hypertext Preprocessor</strong><br>Webページ作成のために用いられるプログラミング言語の一種。">PHP</a>、
                <a rel="tooltip" title="<strong>JavaScript</strong>（略称：JS）<br>主にWebブラウザ上で動作し、HTMLの動的書き換えや入力フォームの自動補完など、ウェブページの使用感向上を目的として使用されたり、リッチクライアントアプリケーションの構築に使われる。">JavaScript</a>、
                <a rel="tooltip" title="<strong>Style Sheet</strong>ドキュメント文書において表示形式を制御する概念。">スタイルシート</a>、
                Webページ埋め込みによる音声・動画のストリーム配信方法など、サイト作成に役立つ実用的なプログラミング・テクニックを解説しています。
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

Easiest Tooltip and Image Preview Using jQuery
シンプルなツールチップ

unknown

Easiest Tooltip and Image Preview Using jQuery

jquery.js v1.2.6、main.js

jQueryを使用したシンプルなツールチップ。 a要素にtooltipクラスを指定するだけで、a要素のtitle属性の内容がツールチップ表示されます。 ツールチップの他に、リンクにマウスオーバーでリンク先のサムネイル画像（自動取得ではない）を表示するサンプルや、サムネイル画像にマウスオーバーでもと画像をポップアウト表示するサンプルも掲載されています。

設置イメージ設置イメージ
HEAD 
<!-- JS -->
<script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
<script src="main.js" type="text/javascript" charset="utf-8"></script>
<!-- CSS -->
<style type="text/css">
  #tooltip { position:absolute; border:1px solid #333; background:#f7f5d1; padding:2px 5px; color:#333; display:none; width:20em; }
  #preview { position:absolute; border:1px solid #ccc; background:#333; padding:5px; display:none; color:#fff; }
  #screenshot { position:absolute; border:1px solid #ccc; background:#333; padding:5px; display:none; color:#fff; }
</style>
HTML 
<!-- ツールチップ -->
<a href="リンク先URL" class="tooltip" title="ツールチップの内容">タイトル</a>

<!-- イメージギャラリー（キャプションあり） -->
<a href="元画像URL" class="preview" title="タイトル"><img src="サムネイル画像URL" alt="gallery thumbnail" /></a>
<a href="元画像URL" class="preview" title="タイトル"><img src="サムネイル画像URL" alt="gallery thumbnail" /></a>
・・・

<!-- 画像ポップアップ（キャプションあり） -->
<a href="サイトURL" class="screenshot" rel="サイトのスクリーンショット画像URL" title="サイト名">サイト名</a>
Easiest Tooltip and Image Preview Using jQueryの設置サンプルサンプルを見る
<!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>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script src="/content/lib/easiest-tooltip-and-image-preview-using-jquery/main.js" type="text/javascript"></script>
        <style type="text/css">
            #tooltip { position:absolute; border:1px solid #333; background:#f7f5d1; padding:2px 5px; color:#333; display:none; width:20em; }
            #preview { position:absolute; border:1px solid #ccc; background:#333; padding:5px; display:none; color:#fff; }
            ul, li { margin:0; padding:0; }
            li { list-style:none; float:left; display:inline; margin-right:10px; }
            div.clear { clear:both; } 
            #screenshot { position:absolute; border:1px solid #ccc; background:#333; padding:5px; display:none; color:#fff; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照：<a href='http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery'>Easiest Tooltip and Image Preview Using jQuery</a></p>
            <h2>Easy Tooltip Using jQuery</h2>
            <p>▼リンクにマウスオーバーするとツールチップが表示されます。</p>
            <blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
                <dl>
                    <dt>Ajax</dt>
                        <dd>
                            <p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。
                            <a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" class="tooltip" title="<strong>XMLHttpRequest</strong><br>JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、
                            通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" class="tooltip" title="<strong>DHTML</strong><br>DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
                            <p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ <a href="http://ja.wikipedia.org/wiki/Extensible_Markup_Language" class="tooltip" title="<strong>XML</strong><br>Extensible Markup Language （エクステンシブルマークアップランゲージ）。">XML</a>の略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
                            <cite><a href="http://ja.wikipedia.org/wiki/Ajax" class="tooltip" title="Ajax From Wikipedia">Ajax From Wikipedia</a></cite>
                        </dd>
                </dl>
            </blockquote>
            <h2>サムネイル画像にマウスオーバーすると元画像をポップアップ表示</h2>
            <h3>イメージギャラリー（キャプションなし）</h2>
            <ul>
                <li><a href="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50.jpg" class="preview"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_s.jpg" alt="gallery thumbnail" /></a></li>
                <li><a href="http://farm4.static.flickr.com/3141/2973155055_4cf4370939.jpg" class="preview"><img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939_s.jpg" alt="gallery thumbnail" /></a></li>
                <li><a href="http://farm4.static.flickr.com/3029/2970912983_543c9af1d2.jpg" class="preview"><img src="http://farm4.static.flickr.com/3029/2970912983_543c9af1d2_s.jpg" alt="gallery thumbnail" /></a></li>
                <li><a href="http://farm4.static.flickr.com/3224/2971760010_e4c6f7bb44.jpg" class="preview"><img src="http://farm4.static.flickr.com/3224/2971760010_e4c6f7bb44_s.jpg" alt="gallery thumbnail" /></a></li>
            </ul>
            <div class="clear"></div>
            <h3>イメージギャラリー（キャプションあり）</h2>
            <ul>
                <li><a href="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50.jpg" class="preview" title="くまさんケーキ"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_s.jpg" alt="gallery thumbnail" /></a></li>
                <li><a href="http://farm4.static.flickr.com/3141/2973155055_4cf4370939.jpg" class="preview" title="クリスピー・クリーム・ドーナツ"><img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939_s.jpg" alt="gallery thumbnail" /></a></li>
                <li><a href="http://farm4.static.flickr.com/3029/2970912983_543c9af1d2.jpg" class="preview" title="CAFE EAT@代官山"><img src="http://farm4.static.flickr.com/3029/2970912983_543c9af1d2_s.jpg" alt="gallery thumbnail" /></a></li>
                <li><a href="http://farm4.static.flickr.com/3224/2971760010_e4c6f7bb44.jpg" class="preview" title="みかん星人"><img src="http://farm4.static.flickr.com/3224/2971760010_e4c6f7bb44_s.jpg" alt="gallery thumbnail" /></a></li>
            </ul>
            <div class="clear"></div>

            <h2>リンクにマウスオーバーするとリンク先のサムネイル画像をポップアップ表示</h2>
            <h3>キャプションなし</h3>
            <p><a href="http://phpjavascriptroom.com/" class="screenshot" rel="/content/lib/easiest-tooltip-and-image-preview-using-jquery/pjr_screenshot.jpg">PHP & JavaScript Room</a></p>
            <h3>キャプションあり</h3>
            <p><a href="http://phpjavascriptroom.com/" class="screenshot" rel="/content/lib/easiest-tooltip-and-image-preview-using-jquery/pjr_screenshot.jpg" title="PHP & JavaScript Room">PHP &amp; JavaScript Room</a></p>
            <br><br><br><br><br><br><br><br><br><br>
        </div>
    </body>
</html>

Example of simple jQuery tooltip
シンプルな吹き出し風のツールチップ

unknown

Example of simple jQuery tooltip

Firefox、IE7、IE6、Opera 9.23 and Safari 3.0.4 on Windows XP
［CSS］jquery.tooltip.css
［JS］jquery.js v1.2.6、tooltip.js

jQueryのTooltipプラグインを使用したシンプルな吹き出し風のツールチップ表示する方法が掲載されています。

設置イメージ設置イメージ
HEAD 
<!-- JS -->
<script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
<script src="tooltip.js" type="text/javascript" charset="utf-8"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="jquery.tooltip.css" charset="utf-8" />
<style type="text/css">
.toolTip { cursor:help; position:relative; }
.toolTipWrapper { width:175px; position:absolute; top:20px; display:none; color:#fff; z-index:9999; }
.toolTipTop { width:175px; height:30px; background:transparent url("/content/lib/jquerytooltip_simple/bubbleTop.gif") no-repeat; }
.toolTipMid { padding:0 15px; background:#66a9ff url("/content/lib/jquerytooltip_simple/bubbleMid.gif") repeat-x top; }
.toolTipBtm { height:13px; background:transparent url("/content/lib/jquerytooltip_simple/bubbleBtm.gif") no-repeat; }
</style>
HTML 
<a href="リンク先URL" class="toolTip" title="ツールチップの内容">テキスト</a>
GLT - Good-Looking Tooltipsの設置サンプルサンプルを見る
<!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>Example of simple jQuery tooltip | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script src="/content/lib/jquerytooltip_simple/tooltip.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="/content/lib/jquery/jquery.tooltip.css" />
        <style type="text/css">
            .toolTip { cursor:help; position:relative; }
            .toolTipWrapper { width:175px; position:absolute; top:20px; display:none; color:#fff; z-index:9999; }
            .toolTipTop { width:175px; height:30px; background:transparent url("/content/lib/jquerytooltip_simple/bubbleTop.gif") no-repeat; }
            .toolTipMid { padding:0 15px; background:#66a9ff url("/content/lib/jquerytooltip_simple/bubbleMid.gif") repeat-x top; }
            .toolTipBtm { height:13px; background:transparent url("/content/lib/jquerytooltip_simple/bubbleBtm.gif") no-repeat; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://3nhanced.com/examples/tooltip/'>Example of simple jQuery tooltip</a> | 設置サンプル</h1>
            <p>▼情報アイコンにマウスオーバーするとツールチップが表示されます。</p>
                <blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
                <dl>
                    <dt>Ajax</dt>
                        <dd>
                            <p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" class="toolTip" title="JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" class="toolTip" title="DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
                            <p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ XMLの略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
                            <cite><a href="http://ja.wikipedia.org/wiki/Ajax" class="toolTip" title="<strong>Ajax From Wikipedia<\/strong><br \/>http://ja.wikipedia.org/wiki/Ajax">Ajax From Wikipedia</a></cite>
                        </dd>
                </dl>
            </blockquote>
        </div>
    </body>
</html>

jQuery InputHintBox
フォーム要素をクリックするとヒントテキストをツールチップ表示

2009/3/26

jQuery Input Floating Hint Box

MIT＆GPL
jquery.js、jquery.dimensions.js、jQuery.inputHintBox.js

フォーム要素をクリックすると、右側にツールチップを表示するjQueryプラグイン。

ツールチップ内に表示するヒントテキストは、オプションの「html」に指定するか、オプションの「attr」にヒントテキストとして表示する文字列を値として指定した属性名を指定します（例えばinput要素のtitle属性など）。 HTMLタグを指定する場合は、実態参照（例：「<」なら「<」）で指定する必要があります。

フォーム要素からツールチップをどれだけ離れた位置に表示するか指定したい場合はオプションの「incrementLeft」にピクセル単位で指定します。

設置イメージ設置イメージ
jQuery Input Floating Hint Boxの設置サンプルサンプルを見る
<!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>jQuery Input Floating Hint Box | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script src="/content/lib/jquery/jquery.jquery.dimensions-1.2.js" type="text/javascript"></script>
        <script src="/content/lib/jquery/jquery.inputHintBox.js" type="text/javascript"></script>
        <script type='text/javascript'>
            $(function() {
                $('.titleHintBox').inputHintBox({div:$('#shiny_box'),div_sub:'.shiny_box_body',source:'attr',attr:'title',incrementLeft:5});
                $('.titleHintBox2').inputHintBox({className:'simple_box',source:'attr',attr:'title',incrementLeft:50});
                $('.titleHintBox3').inputHintBox({className:'simple_box',html:'オプションの「html」でツールチップを指定しています。',incrementLeft:5});
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            label { width:10em; display:block; float:left; clear:left; text-align:right; padding-right:1em; }
            p.group { margin-left:11em; }
            p.group label { width:auto; display:inline; float:none; padding:0; }
            .textstyle { border-color:#a7a7a7 #ccc #ccc #ccc; border-style:solid; border-width:1px; color:#555; }
            .alignToRight { text-align:right; vertical-align:top; }
            /* 角丸ツールチップ */
            .tl, .tr, .bl, .br { background:url(/content/img/ajax/corners.gif); width:10px; height:10px; font-size:0; }
            .tl, .bl { float:left; }
            .tr, .br { float:right; }
            .shiny_box { background:#0066FF; color:#FFF; width:210px; overflow:hidden; }
            .shiny_box p { margin:10px; }
            .shiny_box .tl { background-position:-340px 0; }
            .shiny_box .tr { background-position:-350px 0; }
            .shiny_box .bl { background-position:-340px 10px; }
            .shiny_box .br { background-position:-350px 10px; }
            .shiny_box_body { clear:both; padding:0 10px; overflow:hidden; }
            * html .shiny_box_body { height:1% }
            .simple_box { width:200px; padding:10px; background-color:#d9e6f7; border:3px solid green; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://nicolae.namolovan.googlepages.com/jquery.inputHintBox.html'>jQuery Input Floating Hint Box</a> | 設置サンプル</h1>
            <p>▼フォーム要素をクリックすると、右側にツールチップが表示されます。</p>
<!-- CODE -->
            <form action="#">
                <p>
                    <label for="input_text_0">ユーザー名：</label>
                    <input type="text" id="input_text_0" class="textstyle titleHintBox" title="&lt;strong&gt;ユーザー名&lt;/strong&gt;を入力してください。">
                </p>
                <p>
                    <label for="input_text_1">パスワード：</label>
                    <input type="password" id="input_text_1" class="textstyle titleHintBox" title="&lt;strong&gt;パスワード&lt;/strong&gt;を4文字以上8文字以内で入力してください。">
                </p>
                <p>
                    <label for="input_text_2">コメント：</label>
                    <textarea id="input_text_2" cols="50" rows="5" class="textstyle titleHintBox2" title="「incrementLeft:50」を指定して、input要素から50px離れた位置にツールチップを表示しています。"></textarea>
                </p>
                <p>
                    <label for="input_text_3">その他１：</label>
                    <input type="text" id="input_text_3" class="textstyle titleHintBox3">
                </p>
                <p>
                    <label for="input_text_4">その他２：</label>
                    <input type="text" id="input_text_4" class="textstyle titleHintBox3">
                </p>
                <p>
                    <label for="input_text_5">その他３：</label>
                    <input type="text" id="input_text_5" class="textstyle titleHintBox3">
                </p>
                <p>
                    <label for="select_0">セレクトボックス：</label>
                    <select id="select_0" class="textstyle titleHintBox" title="選択してください">
                        <option>項目１</option>
                        <option>項目２</option>
                        <option>項目３</option>
                        <option>項目４</option>
                        <option>項目５</option>
                    </select>
                </p>
                <p class="group">
                    <label for="c1"><input type="checkbox" id="c1" class="titleHintBox" title="チェックボックスのヘルプ１"> 項目１</label>
                    <label for="c2"><input type="checkbox" id="c2" class="titleHintBox" title="チェックボックスのヘルプ２"> 項目２</label>
                    <label for="c3"><input type="checkbox" id="c3" class="titleHintBox" title="チェックボックスのヘルプ３"> 項目３</label>
                </p>
                <p class="group">
                    <label for="r1"><input type="radio" id="r1" name="r" class="titleHintBox" title="ラジオボタンのヘルプ１"> 項目１</label>
                    <label for="r2"><input type="radio" id="r2" name="r" class="titleHintBox" title="ラジオボタンのヘルプ２"> 項目２</label>
                    <label for="r3"><input type="radio" id="r3" name="r" class="titleHintBox" title="ラジオボタンのヘルプ３"> 項目３</label>
                </p>
                <p>
                    <input type="button" id="btn" class="titleHintBox" title="ボタンにもツールチップを表示できます。" value="ボタン" />
                </p>
            </form>
            <!-- ツールチップ用 -->
            <div id="shiny_box" class="shiny_box" style="display:none;">
                <span class="tl"></span><span class="tr"></span>
                <div class="shiny_box_body"></div>
                <span class="bl"></span><span class="br"></span>
            </div>
<!-- CODE / -->
        </div>
    </body>
</html>

jQuery plugin: Tooltip
リンク先情報をツールチップ表示

unknown

jQuery plugin: Tooltip

MIT／GPL
［CSS］jquery.tooltip.css
［JS］jquery.js v1.2+、jquery.tooltip.js v1.1.

リンク、画像、input要素にマウスオーバーすると、各要素のtitile要素＋αの内容を半透明のツールチップ表示するjQueryプラグイン。

  • リンク（a要素）の場合
    「title属性の内容」＋「href属性のドメイン部分」をツールチップ表示します。
  • 画像（img要素）の場合
    「title属性の内容＋「src属性に指定した画像URL」をツールチップ表示します。
  • input要素の場合
    「title属性の内容」をツールチップ表示します。
設置イメージ設置イメージ
HEAD 
<<!-- JS -->
<script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.tooltip-1.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  $(function() {
    $('a, input, img').Tooltip();
  });
</script>
<<!-- CSS -->
<link rel="stylesheet" type="text/css" href="jquery.tooltip.css" charset="utf-8" />
HTML 
<!-- リンク -->
<a href="リンク先URL" title="ツールチップの内容">テキスト</a>

<!-- 画像 -->
<img src="画像URL" title="ツールチップの内容" />

<!-- input要素 -->
<input type="button" value="ボタン" title="ツールチップの内容" />
GLT - Good-Looking Tooltipsの設置サンプルサンプルを見る
<!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>jQuery plugin: Tooltip | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/jquery/jquery.tooltip.css" />
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script src="/content/lib/jquery/jquery.tooltip-1.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {
                $('a, input, img').Tooltip();
            });
        </script>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/'>jQuery plugin: Tooltip</a> | 設置サンプル</h1>
            <h2>リンク</h2>
            <ul>
                <li><a href="http://www.yahoo.co.jp" title="Yahoo! JAPANへのリンクです。">Yahoo! Japan</a></li>
                <li><a href="http://www.google.co.jp" title="Googleへのリンクです。">Google</a></li>
            </ul>
            <h2>画像</h2>
            <img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_s.jpg" width="75" height="75" title="くまさんケーキ" />
            <h2>input要素</h2>
            <input type="button" value="ボタン" title="クリックすると送信します" />
        </div>
    </body>
</html>

jQuery Tooltip @ jQuery TOOLS
吹き出し風のツールチップ

unknown

jQuery Tooltip @ jQuery TOOLS

MIT＆GPL
jquery.js、jquery.tools.js

Webサイトでよく使用されるインタフェースがつまったjQueryプラグインです。 タブ、オーバーレイ、ツールチップ、スクロールラベル、Flash埋込などを簡単に実装することができます。

テキストやHTML文入のツールチップ、ブラウザデフォルトのツールチップ風のデザインのもの、エフェクト効果付きのツールチップを表示したり、ツールチップの表示位置を動的に配置する方法が掲載されています。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!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>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.tools.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#demo img[title]").tooltip('#demotip');
                $("#download_now").tooltip({ effect: 'slide'});
                // initialize tooltip
                $("#dyna img[title]").tooltip({
                    // use single tooltip element for all tips
                    tip: '#dynatip', 
                    // tweak the position
                    offset: [10, 2],
                    // use "slide" effect
                    effect: 'slide'
                // add dynamic plugin 
                }).dynamic( {
                    // customized configuration on bottom edge
                    bottom: {
                        // slide downwards
                        direction: 'down',
                        // bounce back when closed
                        bounce: true
                    }
                });
            });
        </script>
        <style type="text/css">
            #demotip { 
                display:none;
                background:transparent url(/content/img/ajax/black_arrow.png);
                font-size:12px;
                height:70px;
                width:160px;
                padding:25px;
                color:#fff;
            }
            #demo {
                text-align:center;
            }
            #demo img {
                -moz-border-radius:5px;
                -moz-outline-radius:5px;
                border:1px solid #ccc;
                background:#fff;
                padding:5px;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>【参照】<a href='http://flowplayer.org/tools/tooltip.html'>jQuery Tooltip @ jQuery TOOLS</a></p>
            <h2>基本</h2>
            <!-- the tooltip -->
            <div id="demotip">&nbsp;</div>
            <!-- and the triggers -->
            <div id="demo">
                <img src="http://farm4.static.flickr.com/3639/3664935712_94ca67b18b_t.jpg" title="サラダ@Au Temps Jadis #1"/>
                <img src="http://farm4.static.flickr.com/3220/3664935670_b94968ccbc_t.jpg" title="ノルディック@Au Temps Jadis #2"/>
                <img src="http://farm4.static.flickr.com/3394/3664935528_16fff63afc_t.jpg" title="塩バターキャラメルのクレープ@Au Temps Jadis #4"/>
            </div>

            <h2>ツールチップ内にHTML表示</h2>
            <style type="text/css">
                /* trigger button */ 
                #download_now { 
                    -moz-border-radius:5px;
                    -moz-outline-radius:5px;
                    border:1px solid #ccc;
                    background:#000;
                    color:#fff;
                    padding:5px;
                    text-align:center;
                    font-weight:bold;
                    margin:20px auto;
                    width:159px;
                    display:block;
                    cursor:pointer;
                }
                /* tooltip styling */ 
                .tooltip { 
                    display:none;
                    background:url(/content/img/ajax/black_arrow_big.png);
                    height:163px;
                    padding:40px 30px 10px 30px;
                    width:310px;
                    font-size:11px;
                    color:#fff;
                } 
                /* a .label element inside tooltip */ 
                .tooltip .label { 
                    color:yellow;
                    width:35px;
                } 
                .tooltip img {
                    width:129px; height:102px;
                    margin:0 15px 20px 0;
                    float:left;
                }
                .tooltip a { 
                    color:#ad4;
                    font-size:11px;
                    font-weight:bold;
                }
            </style>
            <!-- trigger element. a regular workable link -->
            <a id="download_now" title="System tooltip for search engines">Download now</a>
            <!-- tooltip element -->
            <div class="tooltip">
                <img src="/content/img/ajax/129x102.png" />
                <table>
                    <tr>
                        <td class="label">File</td>
                        <td>sample.zip</td>
                    </tr>
                    <tr>
                        <td class="label">Date</td>
                        <td>2010-01-20</td>
                    </tr>
                    <tr>
                        <td class="label">Size</td>
                        <td>69.1 kB</td>
                    </tr>
                </table>
                <a href="#">Download Current Release: v1.0</a>
            </div>

            <h2>エフェクト付きツールチップ</h2>
            <style type="text/css">
                #dynatip {
                    display:none;
                    background:transparent url(/content/img/ajax/black_arrow.png);
                    font-size:12px;
                    height:70px;
                    width:160px;
                    padding:25px;
                    color:#fff;    
                }
                 
                /* style the trigger elements */
                #dyna {
                    text-align:center;
                }
                #dyna img {
                    border:0;
                    cursor:pointer;
                }
                /* override the arrow image of the tooltip */
                #dynatip.bottom {
                    background-image:url(/content/img/ajax/black_arrow_bottom.png);
                    padding-top:40px;
                    height:55px;
                }
                 
                #dynatip.bottom {
                    background-image:url(/content/img/ajax/black_arrow_bottom.png);
                }
            </style>
            <!-- use gif image for IE --> 
            <!--[if lt IE 7]>
            <style>
            #dynatip {
                background-image:url(/content/img/ajax/black_arrow_bottom.gif");
            }
             
            #dynatip.bottom {
                background:url(/content/img/ajax/black_arrow_bottom.gif");
            }
            </style>
            <![endif]-->
            <!-- the tooltip --> 
            <div id="dynatip">&nbsp;</div> 
            <!-- a couple of trigger elements --> 
            <div id="dyna">
                <img src="http://farm4.static.flickr.com/3639/3664935712_94ca67b18b_t.jpg" title="サラダ@Au Temps Jadis #1"/>
                <img src="http://farm4.static.flickr.com/3220/3664935670_b94968ccbc_t.jpg" title="ノルディック@Au Temps Jadis #2"/>
                <img src="http://farm4.static.flickr.com/3394/3664935528_16fff63afc_t.jpg" title="塩バターキャラメルのクレープ@Au Temps Jadis #4"/>
            </div>

<!-- / CODE -->
    </body>
</html>

jTip
入力要素の入力ヒントや外部HTMLファイルを読み込んでツールチップ表示

unknown

jTip – A jquery.js Tool Tip

Share ALink Liccense
［CSS］jtip.css
［JS］jquery.js v1.2.6、jtip.js

jQuery使用のツールチップライブラリ。入力要素の入力ヒントや外部HTMLファイルを読み込んでツールチップ表示するタイプなどがあります。

設置イメージ設置イメージ
設置イメージ設置イメージ
HEAD 
<<!-- JS -->
<script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jtip.js" type="text/javascript" charset="utf-8"></script>
<<!-- CSS -->
<link rel="stylesheet" type="text/css" href="jtip.css" charset="utf-8" />
HTML 
<<!-- 入力ヒントの例 -->
<label>ラベル</label>
<input name="pw" type="text" />
<span class="formInfo">
<a href="外部ファイルURL?width=375" class="jTip" id="one" name="キャプション">
テキスト</a>
</span>

<<!-- 外部ファイルを読み込んでツールチップ表示 -->
<a href="外部ファイルURL?width=300" class="jTip" id="six" name="キャプション">
テキスト</a>
jTip - A jQuery Tool Tipの設置サンプルサンプルを見る
<!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>jTip - The Jquery Tool Tip | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <link rel="stylesheet" type="text/css" href="/content/lib/jtip/jtip.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script src="/content/lib/jtip/jtip.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://codylindley.com/Javascript/264/jtip-a-jquery-tool-tip'>jTip - A jQuery Tool Tip</a> | 設置サンプル</h1>
            <div id="contentPad">
                <h2>入力ヒントの例</h2>
                <fieldset>
                    <legend>登録情報</legend>
                    <p>
                        <label>パスワード</label>&nbsp;
                        <input name="" type="text" /><span class="formInfo"><a href="/content/lib/jtip/ajax.htm?width=375" class="jTip" id="one" name="パスワードの入力制限">?</a></span>
                    </p>
                    <p>
                        <label>ユーザーID</label>&nbsp;
                        <input name="" type="text" /><span class="formInfo"><a href="/content/lib/jtip/ajax2.htm?width=475" class="jTip" id="two" name="">?</a></span>
                    </p>
                </fieldset>
                <h2>外部ファイルを読み込んでツールチップ表示</h2>
                <ul>
                    <li>
                        <a href="/content/lib/jtip/ajax4.htm?width=300" class="jTip" id="six" name="クリスピー・クリーム・ドーナツ">キャプション付、サイズ指定（300px）</a>
                    </li>
                    <li>
                        <a href="/content/lib/jtip/ajax3.htm?width=375" class="jTip" id="three">キャプションなし、サイズ指定（375px）</a>
                    </li>
                    <li>
                        <a href="/content/lib/jtip/ajax5.htm" class="jTip" id="four" name="クリスピー・クリーム・ドーナツ">キャプション付、サイズ指定なし</a>
                    </li>
                    <li>
                        <a href="/content/lib/jtip/wiki.htm?width=500&amp;link=http://ja.wikipedia.org/wiki/Ajax" name="Wikipedia" id="gotowiki" class="jTip">Ajax From Wikipedia</a>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>

2009/2/26

jQuery Plugin - Link Control

GPL
jquery.js、jQuery.linkControl.js

リンクにマウスオーバーすると、リンク先を別ウィンドウで開くか同一ウィンドウで開くかを選択できるツールチップを表示するjQueryプラグイン。

設置イメージ設置イメージ
Link Controlの設置サンプルサンプルを見る
<!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>jQuery Plugin - Link Control | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jQuery.linkControl.js"></script>
        <script type="text/javascript">
            $(function(){
                $('a.inline').linkControl({inline:true});
                $('a.overlay').linkControl({overlay:true, padding:5, bgColor:'#fff', borderColor:'#333'});
            });
        </script>
        <style type="text/css">
    a {color:#00CCFF; font-weight:bold; cursor:pointer;}
    a:hover {color:#333;}
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://smple.com/2009/01/22/jquery-plugin-link-control/'>jQuery Plugin - Link Control</a> | 設置サンプル</h1>
            <p>▼リンクにマウスオーバーすると、リンク先を別ウィンドウに開くか、同一ウィンドウに開くかを選択できるツールチップを表示します。</p>
<!-- CODE -->
            <h2>リンク先の開き方選択を「インライン」表示</h2>
            <blockquote>
                <p>
                    Ajax（エイジャックス、アジャックス）は、ウェブブラウザ内で非同期通信とインターフェイスの構築などを行う技術の総称。
                    <a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" class="inline">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、
                    通信結果に応じて<a href="http://ja.wikipedia.org/wiki/%E3%83%80%E3%82%A4%E3%83%8A%E3%83%9F%E3%83%83%E3%82%AFHTML" class="inline">ダイナミックHTML</a>で動的にページの一部を書き換えるというアプローチを取る。
                </p>
                <cite><a href="http://ja.wikipedia.org/wiki/Ajax" class="inline">Ajax - Wikipedia</a></cite>
            </blockquote>

            <h2>リンク先の開き方選択を「オーバーレイ」表示</h2>
            <blockquote>
                <p>
                    Ajax（エイジャックス、アジャックス）は、ウェブブラウザ内で非同期通信とインターフェイスの構築などを行う技術の総称。
                    <a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" class="overlay">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、
                    通信結果に応じて<a href="http://ja.wikipedia.org/wiki/%E3%83%80%E3%82%A4%E3%83%8A%E3%83%9F%E3%83%83%E3%82%AFHTML" class="overlay">ダイナミックHTML</a>で動的にページの一部を書き換えるというアプローチを取る。
                </p>
                <cite><a href="http://ja.wikipedia.org/wiki/Ajax" class="inline">Ajax - Wikipedia</a></cite>
            </blockquote>
<!-- / CODE -->
        </div>
    </body>
</html>

mopTip
デザインがおしゃれなバルーン表示ライブラリ

unknown

mopTip

Safari 3、Firefox 3、Opera 9、IE7、IE6
［CSS］mopTip.css
［JS］jquery.js v1.2.6、jquery.pngFix.js、mopTip.js

デザインがおしゃれなバルーン表示ライブラリ。 バルーンの閉じ方を、マウスアウト時または、バルーン内の閉じるボタンをクリックした時のいずれかを指定可能です。 ただしバルーンのサイズ指定が固定値になるため、一定量の情報や画像をバルーン表示するのに適しています。

設置イメージ設置イメージ
HEAD 
<!-- JS -->
<script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="jquery.pngFix.js" charset="utf-8"></script>
<script type="text/javascript" src="mopTip-1.1.js" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#demo1Btn").mopTip({'w':150,'h':60,'style':"overOut",'get':"#demo1"});
});
</script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/content/lib/mopTip/mopTip.css">
<style type="text/css">
  .hidden { display:none; }
</style>
HTML 
<!-- テキストのみのバルーン -->
<a id="demo1Btn" href="#">テキスト</a>

<div class="hidden">
  <div id="demo1">ツールチップの内容</div>
</div>
mopTipの設置サンプルサンプルを見る
<!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>MopTip| 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.pngFix.js"></script>
        <script type="text/javascript" src="/content/lib/mopTip/mopTip-1.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#demo1Btn").mopTip({'w':150,'h':60,'style':"overOut",'get':"#demo1"});
                $("#demo2Btn").mopTip({'w':150,'h':60,'style':"overClick",'get':"#demo2"});
                $("#demo3Btn").mopTip({'w':320,'h':240,'style':"overOut",'get':"#demo3"});
                $("#demo4Btn").mopTip({'w':75,'h':75,'style':"overClick",'get':"#demo4"});
            });
        </script>
        <link rel="stylesheet" type="text/css" href="/content/lib/mopTip/mopTip.css">
        <style type="text/css">
            .hidden { display:none; }
            #demo { height:100%; width:100%; }
            #demo4Btn { padding:3px 10px; width:5em; background-color:#ae0000; text-align:center; color:#fff; cursor:pointer; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://www.mopstudio.jp/'>mopTip</a> | 設置サンプル</h1>
            <div id="demo">
                <p><a id="demo1Btn" href="#">テキストのみのバルーン</a>（マウスアウトするとバルーンが閉じるタイプ）</p>
                <p><a id="demo2Btn" href="#">テキストのみのバルーン</a>（閉じるボタンをクリックするまでバルーンが閉じないタイプ</p>
                <p><a id="demo3Btn" href="#">画像入りバルーン</a>（画像入りマウスアウトするとバルーンが閉じるタイプ）</span></p>
                <p><span id="demo4Btn">画像入りバルーン</a></span>（閉じるボタンをクリックするまでバルーンが閉じないタイプ）</p>
                <div class="hidden">
                    <div id="demo1">リンクの上からマウスを外すと、バルーンが閉じます。</div>
                    <div id="demo2">右下の閉じるボタンをクリックするとバルーンを閉じることが出来ます。</div>
                    <div id="demo3"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50.jpg" alt="くまさんケーキ" /></div>
                    <div id="demo4"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_s.jpg" alt="くまさんケーキ" /></div>
                </div>
            </div>
        </body>
    </div>
</html>

Side Navigation Tooltip / Popup Bubble
垂直ナビゲーションにマウスオーバーすると右サイドに吹き出し表示

2009/4/1

Side Navigation Tooltip / Popup Bubble

jquery.js

垂直型ナビゲーションにマウスオーバーすると右サイドに吹き出しをアニメーション表示する方法が掲載されています。

設置イメージ設置イメージ
Side Navigation Tooltip / Popup Bubbleの設置サンプルサンプルを見る
<!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>Side Navigation Tooltip / Popup Bubble | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("ul.sidenav li").hover(function(){
                    $(this).find("div").stop().animate({left: "210", opacity:1}, "fast").css("display","block")
                }, function() {
                    $(this).find("div").stop().animate({left: "0", opacity: 0}, "fast")
                });
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            body { color:#fff; background: #005094; }
            a { color:#fff; }
            ul.sidenav { float:left; width:200px; margin:0; padding:0; list-style:none; border-bottom:1px solid #3373a9; border-top:1px solid #003867; }
            ul.sidenav li { position:relative; float:left; margin:0; padding:0; list-style:none; }
            ul.sidenav li a { display:block; position:relative; z-index:2; width:165px; padding:10px 10px 10px 25px; border-top:1px solid #3373a9; border-bottom:1px solid #003867; background:#005094 url(/content/img/ajax/sidenavpopup/sidenav_li_a.gif) no-repeat 5px 10px; text-decoration:none; }
            ul.sidenav li a:hover { background-color:#004c8d; border-top:1px solid #1a4c76; }
            ul.sidenav li div { display:none; position:absolute; top:2px; left:0; width:225px; background:transparent url(/content/img/ajax/sidenavpopup/bubble_top.gif) no-repeat right top; color:#000; }
            ul.sidenav li div p { margin:7px 0; padding:0 10px 10px 25px; background:transparent url(/content/img/ajax/sidenavpopup/bubble_btm.gif) no-repeat right bottom; font-size:.9em; line-height:1.6em; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://www.sohtanaka.com/web-design/side-navigation-tooltip-popup-bubble/'>Side Navigation Tooltip / Popup Bubble</a> | 設置サンプル</h1>
            <p>▼メニューにマウスオーバーすると、右側に吹き出しが表示されます。</p>
<!-- CODE -->
            <div class="cf">
            <ul class="sidenav">
                <li>
                    <a href="#">メニュー1</a>
                    <div><p>メニュー1の説明です。メニュー1の説明です。メニュー1の説明です。メニュー1の説明です。メニュー1の説明です。メニュー1の説明です。メニュー1の説明です。メニュー1の説明です。</p></div>
                </li>
                <li>
                    <a href="#">メニュー2</a>
                    <div><p>メニュー2の説明です。メニュー2の説明ですメニュー2の説明ですメニュー2の説明ですメニュー2の説明です。</p></div>
                </li>
                <li>
                    <a href="#">メニュー3</a>
                    <div><p>メニュー3の説明です。メニュー3の説明です。メニュー3の説明です。</p></div>
                </li>
                <li>
                    <a href="#">メニュー4</a>
                    <div><p>メニュー4の説明です。</p></div>
                </li>
                <li>
                    <a href="#">メニュー5</a>
                    <div><p>メニュー5の説明です。メニュー5の説明です。</p></div>
                </li>
            </ul>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

tinyTips
超軽量の吹き出し風ツールチップ

2010/2/16

jQuery Plugin: TinyTips 1.0

jquery.js、jquery.tinyTips.js v1.0

リンクまたは画像にマウスオーバーした時に、テキストやHTMLを吹き出しで表示する超軽量のjQueryプラグイン。 対象要素には、任意のクラス名やID名を指定することができます。

対象要素のtitle属性の内容が、ツールチップに表示されます。 

$('a.tTip').tinyTips('title');
<a href="#" class="tTip" title="テキスト">用語</a>

ツールチップ内に画像を表示したい場合など、HTML文を吹き出し表示するには、ツールチップ内に表示するHTMLを引数で渡します。 

$('a.imgTip').tinyTips('<img src="画像URL" /><br />テキスト');
<a href="#" class="imgTip">内臓地獄鍋</a>
設置イメージ設置イメージ
設置サンプルサンプルを見る
<!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>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.tinyTips.js"></script>
        <script type="text/javascript">
            $(function(){
                $('a.tTip').tinyTips('title');
                $('img.tTip').tinyTips('title');
                $('a.imgTip').tinyTips('<img src="http://farm4.static.flickr.com/3141/3052278401_ef2e5f7c9e_m.jpg" width="288" /><div align="center">雑草家@特選牛の内臓地獄鍋</div>');
                $('a.imgTip2').tinyTips('<img src="http://farm4.static.flickr.com/3283/3053111822_f5a0d19e66_m.jpg" width="288" /><div align="center">雑草家@特選牛の内臓地獄鍋</div>');
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            .tinyTip {
                width:325px;
                padding:17px 0 0 0;
                display:block;
                background:url(/content/img/ajax/tinyTip-top.png) 0 0 no-repeat;
            }
            .tinyTip .content { 
                padding:0 15px;
                text-align:left;
                font-size:14px;
                color:#010101;
                background:url(/content/img/ajax/tinyTip-content.png) 0 0 repeat-y;
            }
            .tinyTip .bottom {
                height:47px;
                background:url(/content/img/ajax/tinyTip-bottom.png) 0 0 no-repeat;
            }
            /* demo */
            blockquote {
                margin:20px auto;
                width:600px;
            }
            #pic {
                margin:20px auto;
                width:600px;
                -webkit-border-radius:5px;-moz-border-radius:5px;
                border:1px solid #ccc;
                background:#fff;
                overflow:hidden;
                padding:15px;
            }
            #pic div {
                float:left;
                width:240px;
            }
            #pic dl {
                float:right;
                width:330px;
                margin:20px 0 0 0;
            }
            #pic dt {
                font-size:1.2em;
                margin:0; padding:0;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>【参照】<a href='http://www.digitalinferno.net/blog/jquery-plugin-tinytips-1-0/'>jQuery Plugin: TinyTips 1.0</a></p>
<!-- CODE -->
            <blockquote>
                <dl>
                    <dt>Ajax</dt>
                    <dd>
                        <p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" class="tTip" title="XMLHttpRequest|JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、
                            通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" class="tTip" title="DHTML|DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
                            <p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ <a href="http://ja.wikipedia.org/wiki/Extensible_Markup_Language" class="tTip" title="XML|Extensible Markup Language （エクステンシブルマークアップランゲージ）。">XML</a>の略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
                            <cite><a href="http://ja.wikipedia.org/wiki/Ajax" class="tTip" title="Ajax From Wikipedia|http://ja.wikipedia.org/wiki/Ajax"><strong>Ajax</strong>From Wikipedia</a></cite>
                        </dd>
                </dl>
            </blockquote>
            <div id="pic">
                <div><a href="http://www.flickr.com/photos/22559849@N06/3053111822/"><img src="http://farm4.static.flickr.com/3283/3053111822_f5a0d19e66_m.jpg" class="tTip" title="ホルモンがどっさり！" /></a></div>
                <dl>
                    <dt>雑草家@特選牛の内臓地獄鍋</dt>
                    <dd>
                        <p>外苑前にある韓国薬膳料理店「雑草家」の特選牛の<a href="#" class="imgTip">内臓地獄鍋</a>。何が地獄かっていうと、、、ホルモンがこれでもかってくらいにはいってるｗ ハツとかいろんな種類のホルモンが楽しめます♪
                        <p>外苑前にある韓国薬膳料理店「雑草家」の特選牛の<a href="#" class="imgTip2">内臓地獄鍋</a>。何が地獄かっていうと、、、ホルモンがこれでもかってくらいにはいってるｗ ハツとかいろんな種類のホルモンが楽しめます♪
                    </dd>
                </dl>
            </div>
            <br clear="all" />
<!-- / CODE -->
        </div>
    </body>
</html>

tipsy
東西南北方向にツールチップ表示

2008/12/4

tipsy - Facebook-style tooltip plugin for jQuery

MIT
［CSS］tipsy.css
［JS］jquery-1.2.6.min.js、jquery.tipsy.js

東西南北方向にツールチップを表示するjQueryプラグイン。 フェード効果を付けることもできます。

設置イメージ設置イメージ
tipsyの設置サンプルサンプルを見る
<!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>tipsy | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="/content/lib/jquery/tipsy/tipsy.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script src="/content/lib/jquery/jquery.tipsy.js" type="text/javascript"></script>
        <script type='text/javascript'>
            $(function() {
                $('.tips').tipsy();
                $('.north').tipsy({gravity: 'n'});
                $('.south').tipsy({gravity: 's'});
                $('.east').tipsy({gravity: 'e'});
                $('.west').tipsy({gravity: 'w'});
                $('.fadetips').tipsy({fade: true});
        });
        </script>
    </head>
    <body style="width:600px; margin:0 auto;">
        <div id="wrap">
            <h1><a href='http://onehackoranother.com/projects/jquery/tipsy/'>tipsy</a> | 設置サンプル</h1>
<!-- CODE -->
            <h2>例：基本的なツールチップ</h2>
            <p><a class='tips' href='#' title='ツールチップの内容'>テキスト</a></p>

            <h2>例：東西南北方向にツールチップ表示</h2>
            <a class='north' href='#' title='ツールチップの内容'>北方向</a>　
            <a class='south' href='#' title='ツールチップの内容'>南方向</a>　
            <a class='east' href='#' title='ツールチップの内容'>東方向</a>　
            <a class='west' href='#' title='ツールチップの内容'>西方向</a>

            <h2>例：フェード効果付きでツールチップ表示</h2>
            <p><a class='fadetips' href='#' title='ツールチップの内容'>テキスト</a></p>

<!-- CODE / -->
        </div>
    </body>
</html>

Build a Better Tooltip with jQuery Awesomeness
半透明のツールチップ

unknown

Build a Better Tooltip with jQuery Awesomeness

jquery.js、jquery.betterTooltip.js

マウスオーバーでふわっとツールチップを表示するjQueryプラグイン。 吹き出しの表示速度（speed）と表示タイミング（delay）を調整することができます。 吹き出し部分はヘッダ部分、ボディー部分、セリフ付きのボトム画像の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>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
        <script type="text/javascript" src="/content/lib/jquery/better_tooltip/jquery.betterTooltip.js" ></script>
        <script type="text/javascript">
            $(function() {
                $('.tTip').betterTooltip({speed:500, delay:100});
            });
        </script>
        <!-- CSS -->
        <style type="text/css">

.tTip {
    width:200px;
    position:absolute;
    cursor:pointer;
    color:#666;
    font-weight:bold;
}
.tip {
    color:#333;
    width:212px;
    padding-top:22px;
    overflow:hidden;
    display:none;
    position:absolute;
    z-index:500;
    background:transparent url("/content/lib/jquery/better_tooltip/tipTop.png") no-repeat 0 0;
}
.tipMid {
    background:transparent url("/content/lib/jquery/better_tooltip/tipMid.png") repeat-y 0 0;
    margin:0; padding:0 25px 20px 25px;
}
.tipBtm {
    background:transparent url("/content/lib/jquery/better_tooltip/tipBtm.png") no-repeat 0 100%;
    height:22px;
}
#main {
    width:100%; height:240px;
    position:relative;
    margin:100px 30px 10px 30px;
}
#pic1 {
    top:0; left:0;
}
#pic2 {
    top:0; left:240px;
}
#pic3 {
    top:0; left:480px;
}
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照：<a href='http://net.tutsplus.com/tutorials/javascript-ajax/build-a-better-tooltip-with-jquery-awesomeness/'>Build a Better Tooltip with jQuery Awesomeness</a></p>
            <p>▼写真にマウスオーバーでツールチップ表示</p>
<!-- CODE -->
            <div id="main">
                <div class="tTip" id="pic1" title="明太子とろろごはん♥　口がむずがゆくなっても気にしない！"><img src="http://farm5.static.flickr.com/4012/5150664727_b8f80eda81_m.jpg" /></div>
                <div class="tTip" id="pic2" title="すき焼きといえばシナチクだよねん♥　うどんこ成分Love♥"><img src="http://farm2.static.flickr.com/1261/5154145734_dd6d41721d_m.jpg" /></div>
                <div class="tTip" id="pic3" title="ぐつぐつおでん♩　一番すきなのは大根とほとんど崩れかかったジャガイモ。"><img src="http://farm2.static.flickr.com/1164/5157648985_87c8a86b9f_m.jpg" /></div>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

関連コンテンツ

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

投票する 投票結果を見る

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

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

©2025 PHP & JavaScript Room All Rights Reserved.

pagetop