レシポンシブWebデザイン対応のツールチップを実装するjQueryコード - かちびと.net
日曜日ですね。まだまだ寒い日が続き ますが如何お過ごしでしょうか。今日 もレスポンシブWebデザイン関連。いい 加減飽きられそうですね。今日はツール チップですのでさほど需要は無いもの と思われます。ただ、簡単に実装出来る ので備忘録的に。 ツールチップをレスポンシブWebデザインに対応させる、という内容です。 Elegant CSS and jQuery Tooltip: Responsive, Mobile-Friendly レスポンシブWebデザイン対応のツールチップです。 以下公式サイトのサンプルです。 Sample ※確認はresponsivepxが便利です。 左右が一杯の時は噴出しの形状が変化し、レイアウトに合わせて最適化されるようになっています。 コード全部載せるのはなんとも気が引けますが・・・CSSはリンク先でご確認下さい。 $( document ).ready( fun
CSS3で実装する、簡単で美しいツールチップのチュートリアル
IE7など古いブラウザでもそれなりに表示される、CSS3で実装するツールチップのチュートリアルを紹介します。 IE7でのキャプチャ 背景色はRGBaとは別に指定しておくと、カラーも反映されます。 実装 元記事では最初に、a要素のtitle属性を利用した実装例がありますが、それは省略して、デモページの実装を紹介します。 HTML ポイントはツールチップに表示するテキストをどこに配置するかで、ここではa要素内のspan要素に配置しています。 <a href="">adipiscing elit<span>This is the first tooltip</span></a> CSS 最初にspan要素は非表示にし、CSS3を使ってツールチップを美しくデザインします。 span要素はホバー時に表示にします。 a span{ display:none; color:#fff; backgroun
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]古いブラウザではそれなりに、モダンブラウザではよりかっこよく表示する通知パネルのスクリプト -smoke.js
Responsive and Mobile-Friendly Tooltip by Osvaldas Valutis
