MicrotipはCSSのみで実装できる超軽量(圧縮版で1kbだそう)なツールチップライブラリです。aria-label属性で定義したラベルがそのままツールチップとして表示されます。位置はdata-microtip-positionというカスタムデータ属性で指定、role属性でtooltipの対象であることを明示すれば表示されるようになります。CSSを読み込めば後はHTMLだけで実装できます。楽でいいですね。ライセンスはMIT。 Microtip
設置が超簡単でカスタマイズ性の高い吹き出しホバー用jQueryプラグインjquery.balloon.js 設置が超簡単でカスタマイズ性の高い吹き出しホバー用jQueryプラグインjquery.balloon.jsの使い方。 設置方法はjQueryと本プラグインのjavascriptファイルのみでCSSや画像などは不要。どこにでも簡単に設置することができる。 設置方法 (1) プラグインをダウンロードして、jQueryの後にスクリプトファイルを読み込む。
BeautyTips is a jQuery tooltips plugin which uses the canvas drawing element in the HTML5 spec to dynamically draw tooltips (sometimes called "talk bubbles" or "help balloons") associated with a html element on the page. These tips are highly configurable and can be triggered in many different ways. The canvas element is supported in modern versions of FireFox, Safari, and Opera. However, Internet
Smallipopは、ツールチップの実装をマークアップベース(HTMLに書き出し)とJavascriptベース両方で行えるjQueryプラグインです。世の中この手のツールは結構片方でのみだったりします。(そうでもないかもしれないですが) ダウンロード デモ スクリプト <link href="jquery.smallipop.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"> <script src="jquery.smallipop.js" type="text/javascript"> マークアップベースで実装 a要素のtitle属性にツールチップで表示する要素を記述することで実装できます。動的に生成する場合はより容易に実現できるかと。 <a class="
ツールチップでメニューバーを実装する為のスクリプト・Toolbar.Jsのご紹介です。Webアプリ等でたまに見かけるやつ。省スペース化できていいですね。スマフォとの相性もいいかもしれません。 ツールチップでメニューを実装しよう、というもの。省スペース化できていいですね。 jQuery依存です。Webアプリなんかにどうでしょうか、との事。アイコンはtwitter bootstrapで使われているものを使用してるそうです。 こういうやつ。 デモではアイコンのみになっていますが、慣れてない方にとってはこのままだと分かりにくいのでもう一工夫必要かもですね。作ろうと思えば作れますけどアイデアが参考になったのでメモしました。ライブラリは以下に詳細があります。時間無いので詳細は割愛。 Toolbar.Js
カスタマイズの自由度が高いツールチップ用JSライブラリ「Prototip」他ツールチップJS色々 2008年02月13日- Prototip - Tooltips for prototype While waiting for Prototype 1.6.0.1 I've put together a preview for the next release of Prototip. カスタマイズの自由度が高いツールチップ用JSライブラリ「Prototip」他ツールチップJS色々。 まずは、最近公開されたprototip の紹介。 実現したい大体のツールチップは prototip で出来る、というぐらい多機能です。 通常のツールチップ タイトルを付けてみる ツールチップ表示位置を指定 HTMLを表示 リンクボックスを表示 その他 ツールチップのアニメーション表示 クリックでツールチップ表示
今回もTooltip。 [GLT - Good-Looking Tolltips] http://www.robertnyman.com/glt/index.htm 画像やCSSを自分で準備しなければいけない分、前回よりは難しいかもしれません。 ですが、導入するファイルは少なく軽量であるところや、 一つのページで一括してカスタマイズCSSが使えるところは、 使いようによっては便利な気がします。 [ダウンロードと準備] 【JavaScript】 GLTのトップページの[Download the JavaScript file.]からglt.jsをダウンロードします。 【CSS】 GLT > Implementation [Customizing the look]に書かれているCSSをコピーし、 自分のページに取り込みます。 もちろん、このCSSはカスタマイズ可能。 今
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く