Tooltip Styles Inspiration | Codrops 新しいデザインのツールチップサンプル集。 ツールチップデザインというと枯れてきて、誰もが同じようなデザインを想像する感じだと思いますが、CSS3などを駆使しつつ、最新の新しいツールチップデザインが表現されていて、参考にできそうです。 一度は見ておきたいサンプル集です。 関連エントリ ツールチップ、モーダル、通知等を一手に扱えるjQueryプラグイン「jBox」 黒ベースでクールにアニメーションするツールチップ実装jQueryプラグイン「DarkTooltip」 レスポンシブでモバイルフレンドリなツールチップ実装ライブラリ「Mobile-Friendly Tooltip」 ツールチップなどを表示した際に画面からはみ出さないようにしてくれる「offscreen.js」
RWD対応のモーダルウィンドウを実装するスクリプト、Remodalのご紹介です。jQueryに依存しています。 RWDなWebサイトで使えるモーダルウィンドウ実装スクリプトです。 デバイスのモニタサイズに応じて適切なレイアウトを維持するモーダルウィンドウです。 スマフォの場合は全画面に表示されるのでフィンガーフレンドリーを考慮した設計と言えそうです。 <script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.remodal.min.js"></script> 本体とスクリプトを読み込みます。 <div class="remodal" data-remodal-id="modal" data-remodal-options='{
gijsroge/offscreen.js ツールチップなどを表示した際に画面からはみ出さないようにしてくれる「offscreen.js」 ツールチップなどをposition:absoluteで表示したりする場合に、画面の一番端にあるものだと、viewportをはみだしてしまって読めない。 あるいは、スマホでviewport固定してあるのにはみだしてカッコ悪い、といったことが起きますが、このライブラリが位置をアジャストしてくれるっぽいです 一番右端の方にあるツールチップでも左によせてくれて、読めるしビジュアル的にもいい感じ 関連エントリ フラットデザインが美しいシンプルかつスモールなツールチップjQueryプラグイン「Tipr」 レスポンシブでモバイルフレンドリなツールチップ実装ライブラリ「Mobile-Friendly Tooltip」 フラットでシンプルさがいい感じのツールチップライブ
darktooltip Star Tweet darktooltip is a simple customizable tooltip with confirm option and effects Basic usage: <div id="def" class="box" data-tooltip="Hello world">default</div> $('#def').darkTooltip(); Advanced options You can specify some options to customize the appearance of darktooltip. Like this: $('#def').darkTooltip({ animation: 'flipIn', gravity: 'west', confirm: true, theme: 'light' ..
classを変更するだけで、ツールチップを表示する方向、カラーを変更したり、フェードやスライドのアニメーションで表示したりなど、さまざまなスタイルのツールチップを実装できるSassでつくられたスタイルシートを紹介します。 実装にはSassの知識は必要なく、簡単に利用できます。 左から、角丸、半アロー、スライド、フェードの4種類 これらのスタイルはclassを変更するだけで、簡単に使い分けができます。他にもさまざまなスタイルが用意されています。 Simptipの使い方 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" type="text/css" href="simptip-mini.css" /> </head> Step 2: HTML ツールチップのスタイルはclassで、中身はdata
Creating a Radial Menu in CSS マウスのホバーで、「扇形のツールチップ」がアニメーションで表示されます。 続いて、二つ目のデモ。上記にインスパイアされたもので、動きが絶妙ですごいです！ Circular Tooltip こちらはクリックで、「扇形に広がるツールチップ」がアニメーションで表示されます。 実装はデモページにも掲載されていますが、下記のようになっています。 HTML !-- content to be placed inside <body>…</body> --> <a class='button ctrl' href='#' tabindex='1'>★</a> <ul class='tip ctrl'> <li class='slice'><a href='#'>✦</a></li> <li class='slice'><a href='#'>✿
hint.css - A tooltip library in CSS JavaScriptオフ、CSSをのみで動くツールチップライブラリ「hint.css」。 指定位置にカーソルを合わせるとポップアップするツールチップヒントを次のようにCSSだけで実装できます。 ヒント位置も上下左右と自由に配置でき、カラーなどもCSSでカスタマイズできるみたい シンプルで軽量なのがメリットでしょうか。 関連エントリ いろんな種類のツールチップを簡単実装できる「Opentip」 スライダー、ツールチップの他多種多様な機能が詰まったjQueryベースのUIキット「jKit」 可愛いツールチップを実装したjQuery＆CSS3のデモ「Sweet Tooltip」 色々とカスタマイズが可能なツールチップ実装jQueryプラグイン「PowerTip」
Opentip | The free tooltip いろんな種類のツールチップを簡単実装できる「Opentip」 次のような良い感じのデザインのツールチップが、jQuery,Prototypeベースに加え、スタンドアロンでも動かせるようです。 canvasベースの描画ですが、IE7+にも対応。Ajaxによるツールチップの読込にも対応しています 関連エントリ 色々とカスタマイズが可能なツールチップ実装jQueryプラグイン「PowerTip」 スライダー、ツールチップの他多種多様な機能が詰まったjQueryベースのUIキット「jKit」 可愛いツールチップを実装したjQuery＆CSS3のデモ「Sweet Tooltip」
Toolbar allows you to quickly create tooltip style toolbars for use in web applications and websites. The toolbar is easily customisable using Font Awesome icons and provides flexibility around the toolbars display and number of icons. A big thanks to the Drunken Parrot UI Kit by Hoarrd for inspiration. Download You can show your appreciation for Toolbar.js and support future development by donati
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
