Web-ContentsSketch：ウェブを中心にデザイン活動している人の日々の記録 jQueryプラグイン「qTip」 -カスタマイズしやすい感じでちょっとクール？なツールチップ
WEBデザイナーとして日々感じたこと、思ったこと。 写真、絵、デザイン、WEB、インタラクションなことがらについて。 フットサル／サッカーの話題なども。 今、制作中の今、制作中のリニューアル案件のコンテンツをFlashちょこっと入れつつ、jQuery、thickbox、yugaでちょっとしたモーションを入れています。 そんな中、Tooltipも工夫することで、JSで動くコンテンツのアラを減らせればなーとか考えていたところ、 スタイリッシュでカスタマイズ性のあるツールチップjQueryプラグイン「qTip」:phpspot開発日誌 [JS]jQueryのプラグイン33+1選 -2009年4月 | コリス などで紹介されていた「qTip」を入れてみることにしました。 他のjsのTooltipとの比較だと、 ●画像を使わない ●CSSオンリーでカスタマイズ ●モーション、出現位置の調整はjsの数
15 jQuery Plugins To Create A User Friendly Tooltip - Web Design Booth
Tooltip is a good way to show extra information when user hovers the cursor over an element. The “hover box” will appear when the mouse hover in, and disappear when the mouse hover out. If the tooltip is being used appropriately, it can improve our site’s user friendly level, and also save us a lot of spaces. Today, we are going to see 15 jQuery plugins to create an user friendly tooltip. Related
jQueryを使ったフェードインするポップアップバブル | CREAMU
クールにツールチップを表示させたい。 そんなときにおすすめなのが、『Create a jQuery Popup Bubble』。jQueryを使ったフェードインするポップアップバブルだ。 このエントリーでは、↑のようにマウスオーバーでフェードイン&アウトするチールチップの実装方法が紹介されている。 デモは以下から。 » View Demo jQueryを使ったフェードインするポップアップバブル、チェックして参考にしてみてはいかがだろうか。 » Create a jQuery Popup Bubble 恵比寿でカフェ中っと。天気がよくて気持ちいいですねーー。 テンションが上がったのでアニメGIFにしてみましたm(_ _)m
JavaScriptでマウスを乗せると小窓が現れるスクリプト
先日Add Clipsにマウスオーバータイプが登場したと紹介しましたが、今回は同じようにマウスを乗せると下に小窓が現れるスクリプトを紹介してみます。Dynamic Driveというサイトで紹介されていました。 赤字で表示しているdropdowncontent.jsはダウンロードして各自サーバにアップしてください。 <script type="text/javascript" src="dropdowncontent.js"></script> <style type="text/css"> <!-- #subcontent{ position:absolute; background-color:#E6E6FA; visibility: hidden; border: 1px solid #000088; width: 300px; padding: 8px; font-size : 12
3ステップでツールチップを作成「jQuery Simple Tooltip」
twitter facebook hatena google pocket ツールチップと呼ばれるその要素に関する詳細などをヒントっぽく表示する手法があり、フォームなどに使用するとユーザビリティの向上に役立てられます。 3ステップでこのツールチップを導入できるjQuery Simple Tooltipを紹介します。 sponsors 使用方法 【STEP 1】 jQuery Simple Tooltipからファイルをダウンロードします。 【STEP 2】 以下を記述します。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.simpletooltip-min.js"></script> <script> $(function(){
jQueryで動きのある吹き出しを設置してみた
まず外部ファイルでjavascriptとCSSを読み込んで短いjavascriptを記述します。赤字のspeedで吹き出しが降りてくるスピード、delayで降り始めまでの時間を変えられます。 <link href="theme/style.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="js/jquery.betterTooltip.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.tTip').betterTool
JavaScriptで吹き出しを設置するスクリプトのまとめ 6選
マウスを乗せたら現れる吹き出しを設置するスクリプトを紹介します。すべて海外サイトですがサンプルがあるなど比較的設置しやすそうなものを選んでるつもりです。
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=Shift_JIS" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <me
スタイリッシュでカスタマイズ性のあるツールチップjQueryプラグイン「qTip」:phpspot開発日誌
qTip - The jQuery tooltip plugin - Documentation - (Current beta: 1.0.0-beta1) スタイリッシュでカスタマイズ性のあるツールチップjQueryプラグイン「qTip」。 またまた便利そうなツールチップが出てきました。 $('p').qtip({ .... }); のように呼び出すだけで、簡単にツールチップが埋め込めます。 ツールチップの表示タイミングも、show, hide オプションで指定するだけで簡単に変更可能です。 $('p#test').qtip({ content: 'hi! i am tooltip', show: 'mouseover', hide: 'mouseout' }); 吹き出しの位置も、qtip メソッドのオプションとして指定してあげれば簡単に設定可能。 カラーリングも自由自在。 何より、
Image-free CSS Tooltip Pointers - A Use for Polygonal CSS? | Filament Group, Inc.
Image-free CSS Tooltip Pointers - A Use for Polygonal CSS? A while back, Tantek Celik released A Study of Regular Polygons, which used a little-known CSS trick to create non-rectangular shapes such as triangles and pentagons with nothing more than an ordinary HTML element. The experiment is very interesting and really cool, but the practical takeaway wasn’t immediately clear. Recently however, we’
Ajax » その他のJSライブラリ » CSSのみのツールチップ表示 | PHP & JavaScript Room
CSSだけでツールチップ表示を実装するテクニックが掲載されています。 CSSは1KBと軽量！JavaScriptを使わないので、ブラウザに依存しません。 a要素にtooltipクラスを指定し、ツールチップ表示したい部分をa要素内のspan要素に指定するだけで簡単に組み込めます。 <a href='#' class='tooltip'>用語<span>用語の説明</span></a> 設置イメージ Easy CSS Tooltipの設置サンプルサンプルを見る<!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"
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.dreamcss.com/2009/05/12-jquery-tooltip-for-web-developer.html
Caheo | Link Xem Trực Tiếp Bóng Đá Caheo Tv - Full Hd Blv
Onextrapixel
[JS]a要素以外にも実装が可能なフレキシブルなツールチップのスクリプト -wTooltip