第16回 jQueryで楽々実装できるツールチッププラグインを作ってみよう | gihyo.jp
jQueryプラグインの魅力は、JavaScriptの知識がなくても簡単に色々な機能を実装できることですね。今回は「誰でも簡単に実装できるツールチッププラグイン」を作成してみましょう。 ツールチッププラグインの要件は以下の通りです。 titleまたはalt属性がある要素を対象 titleとalt属性両方を持っている場合はtitleを優先 対象要素にマウスオーバーでツールチップをフェードイン 対象要素からマウスアウトでツールチップをフェードアウト 対象要素上ではツールチップはカーソルに追従 まずは完成サンプルとソースコードを見てみましょう。 完成ソースコード // ここからツールチッププラグイン $.fn.easyToolTip = function(options){ // toolTipを生成してbodyに追加しておく var toolTip = $('<div id="toolTip"
[CSS]IE6でもそれなりに、CSS3で実装するツールチップのチュートリアル
吹き出し風デザインの実装イメージ .tooltip { position: relative; background: #eaeaea; cursor: help; display: inline-block; text-decoration: none; color: #222; outline: none; } .tooltip span { visibility: hidden; position: absolute; bottom: 30px; left: 50%; z-index: 999; width: 230px; margin-left: -127px; padding: 10px; border: 2px solid #ccc; opacity: .9; background-color: #ddd; background-image: -webkit-linear-gr
[JS]シンプルながら優れモノ！ホバーやクリックでさまざまなツールチップを表示するスクリプト -DarkTooltip
ツールチップ系のスクリプトは数多くありますが、これはなかなか使いやすそう！ トリガーはホバーだけでなくクリックにも対応、HTMLコンテンツの表示にも対応、カスタマイズにも優れており、カラー、サイズ、不透明度、表示方向、アニメーションのさまざまなエフェクト、Confirmからのイベントにも対応しています。 上段はサイズ、中段は方向、下段はアニメーション アニメーションなどの実際の動作はデモページでぜひ試してみてください。 DarkTooltipの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとしてhead内に記述します。 <head> ... <link rel="stylesheet" href="darktooltip.css"> <script src="jquery-1.10.2.min.js"></script> <script
[JS]後発だけに高性能で、実装はシンプルで超軽量のツールチップのスクリプト -jQuery PowerTip
jQuery PowerTip jQuery PowerTip -GitHub jQuery PowerTipの特徴 jQuery PowerTipのデモ jQuery PowerTipの使い方 jQuery PowerTipの特徴 実装が簡単。 シンプルな構造。 ツールチップはカーソルに追従とスタティックに表示の2種類をサポート。 ツールチップの追従するエリアは設定可能。 カスタマイズも簡単。 キーボードナビゲーションにも対応。 表示のアニメーションは、スムーズなフェードインとフェードアウト。 ツールチップは複数設置可。 あらゆる要素にツールチップを表示可能。 ビヘイビアやイベントをもった複雑なコンテンツにも対応。 6KBと超軽量。 jQuery PowerTipのデモ デモは、ベーシックな3種類が用意されています。 Demo: 左のエリアをホバーすると東にツールチップを表示し、ツールチ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
