[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)
[CSS]ツールチップをスマホにも対応させた超軽量のスタイルシートのライブラリ -Microtip
見た目は普通のツールチップ。軽快なアニメーションで表示されるのも、表示方向を指定できるのも探せばあると思います。 しかしその中身はピュアCSS、1kbの超軽量スタイルシートで実装された、スマホもサポートされたツールチップのライブラリを紹介します。
![[CSS]ツールチップをスマホにも対応させた超軽量のスタイルシートのライブラリ -Microtip](https://cdn-ak-scissors.b.st-hatena.com/image/square/2986b9808bd8ab1a91fe28b547adec29088af56d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017062201.png)
軽量シンプルなツールチップライブラリ・「Tippy.js」
Tippy.jsは軽量シンプルなツールチップライブラリです。他ライブラリを必要としない非依存型となっています。Popper.jsがベースみたいですね。オプションもいろいろ。使い方も簡単そうですね。ライセンスはMIT。 Tippy.js
軽量、フラット、シンプルなツールチップを実装できるjQueryプラグイン「Tipr」 – bl6.jp
Tiprはフラットでシンプルなツールチップを実装することができるjQueryプラグインです。ファイル容量もとても軽量なのでサクサク動作します。無駄な装飾がなくスッキリしたデザインのツールチップを表示させたい人は必見です。 Tiprに関する詳しい使い方やダウンロード、または実際のデモ動作は以下のページから確認できます。 デモ デモでは3つのテキストが縦に並んでおり、各テキストにホバーするとシンプルなツールチップが表示されます。とてもシンプルで落ち着いた印象のツールチップです。 使い方も簡単なので手軽に実装可能です。ツールチップに表示させるテキストは、HTMLのタグ内に追加する「data-tip」という属性に指定します。それと、タグには「tip」というクラス名を付与します。 また、Tiprにはオプションもいくつか用意されています。主なオプションは、speed、mode、spaceです。デフォル
CSSのみで実現する1KB未満の超軽量ツールチップ「Wenk」
WEBサイトなどの補足事項などを表示するのに便利なツールチップ。一般的にはアニメーション表現が伴うため多くはjavascriptを利用して制作されていますが、今回紹介するのはCSSのみで実現する1KB未満の超軽量ツールチップ「Wenk」です。 非常にシンプルなツールチップで、上下左右位置を表示したり、幅の調整したり細かな調整がデキるようになっています。 詳しくは以下 利用方法は非常に単純で、上記の様に要素にdata-xxxxといった形式で内容と位置を指定することで実装可能になっています。CSSだけなので、特にjsなどを読み込む必要なくシンプルに実装できるため、幅広いユーザーが利用しやすいライブラリになっていると思います。 ソースコードはGitHubに公開されておりサンプルと共にダウンロード可能です。ライセンスはMIT License (MIT)となっており、ライセンスに従って、自由に利用す
CSSのみで実現する軽量なツールチップ「Ballon.css」
WEB上で、ボタンや画像などの補足説明に用いられるツールチップ、そこまで多くは見かけませんが、ユーザーナビゲーションとしては直感的で有効な手法で、制作するにあたって導入を検討するWEBデザイナーの方は多いのではないでしょうか？今日紹介するのはCSSのみで実現する軽量なツールチップ「Ballon.css」です。 CSSのみで制作されていますが、なめらかなアニメーションを実現しています。ICONフォントや絵文字にも対応しています。 詳しくは以下 上、下、左、右と4方向にツールチップが出せ、単語から文章まで大きさも5段階にコントロールする事が可能です。 導入は非常にシンプルで、「Ballon.css」CSSを読み込ませて、あとは動かしたい所定の動きをdata-balloon-posという型で呼び出すだけで実装できます。ソースコードなどは「Balloon.css — CSS tooltips fo
プログラミング不要で、マウスオーバー時にポップアップ表示ができる超軽量CSSライブラリ「Hint.css」を使ってみた！ : うえぶはっく
今すぐ、自分のWebサイトやブログなどにポップアップ表示を導入できる超軽量なCSSライブラリ「Hint.css」のご紹介！ HTMLの好きな要素に、専用のクラス名を指定するだけで誰でもすぐに利用できるのが特徴で、メッセージやインフォメーション、ヒントなどを表示させるのに最適です。 そこで、スマホでの利用シーンも踏まえて、サンプル例と一緒にご紹介しようと思います！ 使い方！ 利用方法はシンプルで、GitHubからファイルをダウンロードするか、以下のCDN経由でCSSライブラリを取得します。 https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.0.0/hint.min.css HTMLの骨組みはこんな感じになるでしょう。 // index.html <!doctype html> <html> <head> <meta charset="utf-
カスタマイズ性が超高いツールチップ実装jQueryプラグイン「Protip」:phpspot開発日誌
Protip - Yet another jQuery tooltip plugin カスタマイズ性が超高いツールチップ実装jQueryプラグイン「Protip」 ツールチップにここまでやるか？というぐらいカスタマイズが可能なツールチップ実装用のプラグイン。 とにかく、細部にまでデザインにこだわりたいという場合は、こちらも選択肢の１つになるのかも。 関連エントリ 軽量・レスポンシブなツールチップ実装「tipso」 カスタマイズ性が最強のツールチップ実装jQueryプラグイン「Protip」 3D等クールなアニメーション効果付きで表示できるツールチップ実装「html5tooltips.js」 入力値にエラーがある場合にツールチップを表示できる「jQuery-Validation-Bootstrap-tooltip」
3D等クールなアニメーション効果付きで表示できるツールチップ実装「html5tooltips.js」:phpspot開発日誌
html5tooltips.js - Tooltips with smooth 3D animation 3D等クールなアニメーション効果付きで表示できるツールチップ実装「html5tooltips.js」 ツールチップ用のライブラリは多数ありますが、表示がカッコいいツールチップ実装JSライブラリのご紹介です。 アニメーションを綺麗に表示することでよりネイティブアプリのような効果を作ることができます。 関連エントリ 軽量・レスポンシブなツールチップ実装「tipso」 入力値にエラーがある場合にツールチップを表示できる「jQuery-Validation-Bootstrap-tooltip」 新しいデザインのツールチップサンプル集 カスタマイズ性が最強のツールチップ実装jQueryプラグイン「Protip」
カスタマイズ性が最強のツールチップ実装jQueryプラグイン「Protip」:phpspot開発日誌
Protip - Yet another jQuery tooltip plugin カスタマイズ性が最強のツールチップ実装jQueryプラグイン「Protip」 表示位置、アニメーションのカスタマイズ、好きなコンテンツの掲載、スキン機能など、これでもかという位ツールチップに込めている辺がある種凄い 表示位置をとっても、基本は４箇所のライブラリがほとんどですが１６箇所選べます 関連エントリ 軽量・レスポンシブなツールチップ実装「tipso」 入力値にエラーがある場合にツールチップを表示できる「jQuery-Validation-Bootstrap-tooltip」 ツールチップ等、画面をはみ出していたら表示位置を変える等できる「offscreen.js」 新しいデザインのツールチップサンプル集 ツールチップスタイルのツールバー実装「Toolbar.js」
ツールチップ等、画面をはみ出していたら表示位置を変える等できる「offscreen.js」:phpspot開発日誌
ツールチップ等、画面をはみ出していたら表示位置を変える等できる「offscreen.js」 2015年07月28日- gijsroge/offscreen.js GitHub ツールチップ等、画面をはみ出していたら表示位置を変える等できる「offscreen.js」 ツールチップが画面をはみ出すと、bodyの幅はあがってしまって、スマホサイトなどでは横スクロールが発生する等みっともない形になってしまいますが、 このjQueryプラグインを使って、はみ出た場合のclass指定変更が出来るため、そういったことを防げます 実装例はこのように、classの指定を４方向行うというものです 関連エントリ ルーレット型のUIを実現できるjQueryプラグイン「rouletteWheel」 シンプルなサイドメニュー実装jQueryプラグイン「Panel slider」 ヘッダ、フッタを固定したテーブルを実
[JS]シンプルながら優れモノ！ホバーやクリックでさまざまなツールチップを表示するスクリプト -DarkTooltip
ツールチップ系のスクリプトは数多くありますが、これはなかなか使いやすそう！ トリガーはホバーだけでなくクリックにも対応、HTMLコンテンツの表示にも対応、カスタマイズにも優れており、カラー、サイズ、不透明度、表示方向、アニメーションのさまざまなエフェクト、Confirmからのイベントにも対応しています。 上段はサイズ、中段は方向、下段はアニメーション アニメーションなどの実際の動作はデモページでぜひ試してみてください。 DarkTooltipの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとしてhead内に記述します。 <head> ... <link rel="stylesheet" href="darktooltip.css"> <script src="jquery-1.10.2.min.js"></script> <script
Bigfoot - 注釈をツールチップ風に表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました この見せ方は良いと思います。 Webサイトのコンテンツに注釈を載せたいと思うことは多いです。しかし注釈は一般的にフッターにまとめて載せるもので、クリックすると一番下まで移動してしまうのは読み手としては面倒でしょう。 そこで注釈の内容をツールチップ風に展開してくれるライブラリがBigfootになります。デザインとしてレスポンシブで、スマートフォンなどでも扱えるのが利点になります。 まず使い方としてはBigfootを読み込んだ後、注釈を出したい部分にリンクを埋め込みます。 <sup id="fnref:1"><br><a href="#fn:1" rel="footnote">1</a><br></sup> そして注釈を記述します。一般的にはHTMLの下部にまとめて載せるかと思います。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CSS】ツールチップをHTMLとCSSだけで簡単に作る
CSSだけで動く軽量1KBのツールチップ実装「Microtip」:phpspot開発日誌
SVGとanime.jsを使った機敏に動くツールチップ実装「Playful Little Tooltip Ideas」:phpspot開発日誌
いろいろなオプション付きのツールチップ作成CSSライブラリ・「Tootik」
Webアプリ向けに設計された非依存型で軽量なツールチップ実装スクリプト・「Popper.js」
ブロック要素の好きな位置にツールチップを配置でき移動も簡単にできる「Pointy」:phpspot開発日誌