TITLE属性を利用した簡単ツールチップの作り方 jQuery編 :: 5509
散々既出な気がするネタシリーズ。TITLE属性をツールチップで表示させるやつです。簡単なヘルプとか表示してあげるとユーザビリティを向上させることができる場合がありますよね。jQueryを使うととても簡単につくれます。というよりも、使いたいときにさらっとコピってすぐ使えると思うので頭の片隅にでも置いておくと便利かもしれません。 Demo Download demo files ポイントは TITLE属性を持っている要素にイベントを設定する ( *1 mouseover()でツールチップを生成する ( *2 mouseout()でツールチップを消去する ( *3 mousemove()でツールチップの位置を変える ( *4 です。今回はmouseout()で消去するにしてますが、別にいちいち消さなくてもいいです。textを変えればいいだけですから。上の項目をJSソースにすると以下のような感じに
CSSのみのツールチップ表示｜その他のJSライブラリ｜Ajax｜PHP & JavaScript Room
CSSだけでツールチップ表示を実装するテクニックが掲載されています。 CSSは1KBと軽量！JavaScriptを使わないので、ブラウザに依存しません。 a要素にtooltipクラスを指定し、ツールチップ表示したい部分をa要素内のspan要素に指定するだけで簡単に組み込めます。 <a href='#' class='tooltip'>用語<span>用語の説明</span></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
レシポンシブWebデザイン対応のツールチップを実装するjQueryコード - かちびと.net
日曜日ですね。まだまだ寒い日が続き ますが如何お過ごしでしょうか。今日 もレスポンシブWebデザイン関連。いい 加減飽きられそうですね。今日はツール チップですのでさほど需要は無いもの と思われます。ただ、簡単に実装出来る ので備忘録的に。 ツールチップをレスポンシブWebデザインに対応させる、という内容です。 Elegant CSS and jQuery Tooltip: Responsive, Mobile-Friendly レスポンシブWebデザイン対応のツールチップです。 以下公式サイトのサンプルです。 Sample ※確認はresponsivepxが便利です。 左右が一杯の時は噴出しの形状が変化し、レイアウトに合わせて最適化されるようになっています。 コード全部載せるのはなんとも気が引けますが・・・CSSはリンク先でご確認下さい。 $( document ).ready( fun
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
普通のブログなのに表示されるエロいバナー広告は完全にアウトだと思う件 - 着ぐるみ追い剥ぎペンギン
404 - Not Found：テレビ東京
吹き出し素材専門サイト「フキダシデザイン」
