Tippy.js - Vanilla JS Tooltip and Popover Library Vanila.jsベースのツールチップ＆ポップオーバー実装「Tippy.js」 ツールチップなら任せろといわんばかりの豊富な機能多数 関連エントリ CSSだけで動く軽量1KBのツールチップ実装「Microtip」
Vanila.jsベースのツールチップ＆ポップオーバー実装「Tippy.js」:phpspot開発日誌
Tippy.js - Vanilla JS Tooltip and Popover Library Vanila.jsベースのツールチップ＆ポップオーバー実装「Tippy.js」 ツールチップなら任せろといわんばかりの豊富な機能多数 関連エントリ CSSだけで動く軽量1KBのツールチップ実装「Microtip」
[JS]ツールチップの実装に迷った時に！依存なしで、さまざまなツールチップを実装できる軽量スクリプト -Tippy.js
シンプルなツールチップをはじめ、表示方向の変更、形状の変更、アニメーションの変更、ホバー・フォーカス・クリック・タッチ操作に対応したツールチップを簡単に実装できる軽量スクリプトを紹介します。 Tippy.js Tippy.js -GitHub Tippy.jsのデモ Tippy.jsの使い方 Tippy.jsのデモ Tippy.jsでは、さまざまなツールチップを簡単に実装できます。 デモにはそれらのツールチップが実際に試せるので、アニメーションで紹介します。 まずは、デフォルトと表示方向の制御。
![[JS]ツールチップの実装に迷った時に！依存なしで、さまざまなツールチップを実装できる軽量スクリプト -Tippy.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/3490c5832afd3ee0814fcc1a370df5e31fa876af/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201801%2F2018030101.png)
設置が超簡単でカスタマイズ性の高い吹き出しホバー用jQueryプラグインjquery.balloon.js - URIN HACK
設置が超簡単でカスタマイズ性の高い吹き出しホバー用jQueryプラグインjquery.balloon.js 設置が超簡単でカスタマイズ性の高い吹き出しホバー用jQueryプラグインjquery.balloon.jsの使い方。 設置方法はjQueryと本プラグインのjavascriptファイルのみでCSSや画像などは不要。どこにでも簡単に設置することができる。 設置方法 (1) プラグインをダウンロードして、jQueryの後にスクリプトファイルを読み込む。
BeautyTips Demo Page
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」
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="
ツールチップタイプのメニューバーを実装するjQueryプラグイン・Toolbar.Js
ツールチップでメニューバーを実装する為のスクリプト・Toolbar.Jsのご紹介です。Webアプリ等でたまに見かけるやつ。省スペース化できていいですね。スマフォとの相性もいいかもしれません。 ツールチップでメニューを実装しよう、というもの。省スペース化できていいですね。 jQuery依存です。Webアプリなんかにどうでしょうか、との事。アイコンはtwitter bootstrapで使われているものを使用してるそうです。 こういうやつ。 デモではアイコンのみになっていますが、慣れてない方にとってはこのままだと分かりにくいのでもう一工夫必要かもですね。作ろうと思えば作れますけどアイデアが参考になったのでメモしました。ライブラリは以下に詳細があります。時間無いので詳細は割愛。 Toolbar.Js
様々なスタイルのツールチップを実装できるスクリプト・opentip
様々なスタイルでツールチップを実装する為のJavaScriptフレームワーク・opentipのご紹介です。噴出しの形状や表示場所、Ajax対応など、状況に応じて実装する事が出来ます。 ツールチップ実装用のJSライブラリです。様々なスタイルで実装可能です。 ツールチップのJSフレームワークです。OSSとして公開されています。 複数のツールチップを一括で出すことも可能です。 <div data-ot="Shown after 2 seconds" data-ot-delay="2"></div>カスタムデータ属性でセッティングできるみたい。 new Opentip("#foobar", "Shown after 2 seconds", { delay: 2 });上記のようにAPIを使用する方法でもOKとの事。 ライセンスはMITです。詳細は以下よりどうぞ。 opentip
[JS]後発だけに高性能で、実装はシンプルで超軽量のツールチップのスクリプト -jQuery PowerTip
jQuery PowerTip jQuery PowerTip -GitHub jQuery PowerTipの特徴 jQuery PowerTipのデモ jQuery PowerTipの使い方 jQuery PowerTipの特徴 実装が簡単。 シンプルな構造。 ツールチップはカーソルに追従とスタティックに表示の2種類をサポート。 ツールチップの追従するエリアは設定可能。 カスタマイズも簡単。 キーボードナビゲーションにも対応。 表示のアニメーションは、スムーズなフェードインとフェードアウト。 ツールチップは複数設置可。 あらゆる要素にツールチップを表示可能。 ビヘイビアやイベントをもった複雑なコンテンツにも対応。 6KBと超軽量。 jQuery PowerTipのデモ デモは、ベーシックな3種類が用意されています。 Demo: 左のエリアをホバーすると東にツールチップを表示し、ツールチ
[CSS]CSS3対応・非対応ブラウザで動作するアイコン付きの素敵なツールチップ
CSS3対応ブラウザではより美しく、非対応ブラウザでもそれなりに美しいアイコン付きのツールチップを紹介します。
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
[JS]これ最強かものツールチップスクリプト -BeautyTips
シンプルなツールチップも簡単に実装できるだけなく、デザインのカスタマイズが可能で、対応トリガーも豊富なツールチップのスクリプト「BeautyTips」を紹介します。 BeautyTips demo BeautyTipsは機能が豊富というだけでなく、テキストや画像、AJAXコンテンツの表示、ツールチップの表示位置の自動補正など基本性能もしっかりと抑えられており、フォームエレメントへの表示、ツールチップ元の変更なども可能です。 ツールチップはcanvasで描かれており、画像は必要ありません。 対応ブラウザはIE6.x+, Fx3.x, Op8+, Safari3.xとのことで、canvas非対応ブラウザにはExplorerCanvasが使用されています。また、IE6のz-indexへの対応にbgiframe、ホバー処理にhoverIntentが使用されています。 ※Chrome 1, Fx2で
カスタマイズの自由度が高いツールチップ用JSライブラリ「Prototip」他ツールチップJS色々:phpspot開発日誌
カスタマイズの自由度が高いツールチップ用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を表示 リンクボックスを表示 その他 ツールチップのアニメーション表示 クリックでツールチップ表示
� JavaScriptでTooltipを実装する。(2) -glt.js 寺子屋未満: 最新Web情報をコツコツお届け
今回も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はカスタマイズ可能。 今
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSだけで動く軽量1KBのツールチップ実装「Microtip」:phpspot開発日誌
CSSのみで実装できる超軽量なツールチップライブラリ・「Microtip」
[JS]実装が簡単で、表示オプションが豊富なツールチップのスクリプト -Tiptip
[JS]超軽量で、シンプルなツールチップを実装するスクリプト -vTip
[JS]HTMLを汚さないで実装できる、シンプルでクールなツールチップのスクリプト -Simpletip
http://youmos.com/news/glt_js