Loading...

htmlコーディング 小棹制作所

この記事がよく読まれてます

tumblrでの企画など、お手伝いします
  • fullPage.js ページスクロールで紙芝居のように魅せるWebページが作れるjQueryプラグイン (35,800Views)
  • 初代から大幅にパワーアップして帰ってきた! Owl Carousel 2の紹介とかんたんな設置方法 (17,854Views)
  • 多分一番簡単!ドロワーメニューを実装するためのjQueryプラグイン「drawer」 (16,416Views)
  • tumblrのオリジナルテーマ作成入門 tumblrの独自タグを理解しよう (15,686Views)
  • wow.jsとanimate.cssを組み合わせると、かんたんに、かっこいい動きがあるWebページを作れます。 (15,675Views)
  • [メモ]Macのメールアプリで自動転送(もしくはリダイレクト)設定をする方法 (15,517Views)
  • スマートフォンサイトでよく見る横からニョキッと出現するスライドメニューの実装なら「Sidr」で (15,258Views)
  • 国産のtumblrポートフォリオ用テーマ “Illustfolio2″ がすごくいい! (11,615Views)
  • シンプルだから機能もデザインもかんたんにカスタマイズできるjQueryのカルーセルプラグイン “Owl Carousel” (11,016Views)
  • ミュージシャン・バンド・アーティスト用Webサイト作成のためのTumblrテーマを作ったので配布します (10,674Views)
  • 企業ホームページっぽいレイアウトのTumblrのテーマを作ったので無料配布します (10,490Views)
  • Twitter Bootstrapが3にアップグレードして、さらに使いやすくなった (10,311Views)
  • さくっとヘッダー固定のhtmlテーブルが作れるjQueryプラグイン「Fixed Header Table」 (9,989Views)
  • 翻訳機能をWebサイトに埋め込む方法 (9,591Views)
  • tumblrのオリジナルテーマをゼロから作るのは心が折れるので、スターターテーマを使おう (9,570Views)
  • Twitter Bootstrapの基礎 Twitter Bootstrapってなに? からモーダルウィンドウ作成まで (8,906Views)
  • 細かいカスタマイズができるCSSフレームワーク、”Gumby FRAMEWORK” (6,841Views)
  • Twitter BootstrapベースのWordPress無料テーマ “Roots” (6,602Views)
  • tumblrのテーマに無限スクロール機能を追加する方法 (5,497Views)
  • TwitterBootstrapでも採用されている、たぶんもっとも簡単なレスポンシブ対応テーブルの作り方 (5,363Views)
  • 超シンプルにツールチップが作れるjQueryプラグイン「jQuery Cursor Tooltips」

    2015年05月22日(金)
    260Views

    この記事は執筆から1年以上経過しており、情報が古い可能性があります。

    少ないコードでツールチップを実装できるjQueryプラグインの紹介です

    jQuery Cursor Tooltipsとは

    jQuery Cursor Tooltipsは少ないコードでツールチップを実装できる、jQueryプラグインです。

    jQuery Cursor Tooltips、githubサイト nathco/jQuery.mousetip · GitHub 

    ツールチップとは

    ツールチップは、ある要素にマウスが乗った時に現れる要素のことです。

    articleExplanationImage 44222

    マウスを乗せた要素に対する説明などで用いられることが多いです。
    動作サンプル
    Nathan Rutzky – jQuery.mousetip

    使い方

    ダウンロード

    下記Webページ、右下にある「Download ZIP」ボタンからzipファイルをダウンロードします。
    nathco/jQuery.mousetip · GitHub

    必要ファイルのhtmlファイルへの読み込み

    htmlファイルに読み込むファイルは、フォルダ内のjQuery.mousetip.js、およびjQueryプラグインですのでjQuery本体の2つ。
    jQuery

    <script src="jQuery.min.js"></script>  
    <script src="jQuery.mousetip.js"></script>
    

    ファイルのパスはご自身の開発環境のディレクトリー構成に合わせて適宜変更してください。

    htmlマークアップ

    続いて、実装に必要なhtml要素のマークアップについて。

    <div>Content<span class="tip">Mousetip 1</span></div>
    <div>Content<span class="tip">Mousetip 2</span></div>
    <div>Content<span class="tip">Mousetip 3</span></div>
    

    ツールチップを表示させたい要素をdivで囲います。
    次に、ツールチップの内容を、divのなかにクラス名をtipとしたspanタグで囲っています。

    プラグイン呼び出し

    プラグイン呼び出しのために下記のコードを記述します。

    <script>
    $(function() {
        $('div').mousetip('.tip'); 
    });
    </script>
    

    記述箇所は、jQuery.mousetip.jsファイルを読み込んだ記述より下にしてください。
    また、ここにオプションを記述することも可能です。詳細は下記配布サイトにて。
    nathco/jQuery.mousetip · GitHub

    スタイル記述

    最後に、CSSを記述します。

    span.tip {
        position: absolute;
        z-index: 2;
        display: none;
    } 
    

    上記は必要最低限の記述で、これにデザインにあったスタイルを追加して、完成です。
    デザインスタイル例

    span.tip {
    
        /* Required */
        position: absolute;
        z-index: 2;
        display: none;
    
        /* Optional */
        font-size: 15px;
        max-width: 150px;
        height: auto;
        padding: 10px;
        border-radius: 3px;
        box-shadow: 0 1px 2px #666;
        background: #FD0;
    } 
    

    まとめ

    この記事のまとめはありません。

    おわりに

    この記事はあなたのお役にたてましたか?
    もしよろしければ・・・

    この記事をみんなに教える?


    筆者に何か教える?

    たとえば、 小棹制作所はこんなこと↓を知りたがっているようです。

    feedlyでブログを購読する?

    follow us in feedly

    筆者にメーッセージを送る?

    なんでもご自由に書いて送ってください。
    ご質問等返信を希望の場合は、メールアドレス等返信先の記載をお忘れなく。

    チェックを入れて送信してください

    Copyright (C) 2012 小棹制作所.
    All rights reserved.