[B! ツールチップ][ライブラリ] masayoshinymのブックマーク

masayoshinym id:masayoshinym

ツールチップとライブラリに関するmasayoshinymのブックマーク (5)

[JS]ツールチップの実装に迷った時に！依存なしで、さまざまなツールチップを実装できる軽量スクリプト -Tippy.js
シンプルなツールチップをはじめ、表示方向の変更、形状の変更、アニメーションの変更、ホバー・フォーカス・クリック・タッチ操作に対応したツールチップを簡単に実装できる軽量スクリプトを紹介します。 Tippy.js Tippy.js -GitHub Tippy.jsのデモ Tippy.jsの使い方 Tippy.jsのデモ Tippy.jsでは、さまざまなツールチップを簡単に実装できます。デモにはそれらのツールチップが実際に試せるので、アニメーションで紹介します。まずは、デフォルトと表示方向の制御。
masayoshinym 2018/03/01
ツールチップ

ライブラリ

後で試す
リンク
CSSだけで動く軽量1KBのツールチップ実装「Microtip」:phpspot開発日誌
Microtip - Modern, minimal and accessible css tooptips. 1kb only CSSだけで動く軽量1KBのツールチップ実装「Microtip」 CSSだけなのにアニメーションもちゃんとしてくれ必要最小限で使えそうです関連エントリ軽量・レスポンシブなツールチップ実装「tipso」カスタマイズ性が超高いツールチップ実装jQueryプラグイン「Protip」ツールチップ等、画面をはみ出していたら表示位置を変える等できる「offscreen.js」
masayoshinym 2017/12/11
ツールチップ

CSS

ライブラリ
リンク
CSSのみで実現する1KB未満の超軽量ツールチップ「Wenk」
WEBサイトなどの補足事項などを表示するのに便利なツールチップ。一般的にはアニメーション表現が伴うため多くはjavascriptを利用して制作されていますが、今回紹介するのはCSSのみで実現する1KB未満の超軽量ツールチップ「Wenk」です。非常にシンプルなツールチップで、上下左右位置を表示したり、幅の調整したり細かな調整がデキるようになっています。詳しくは以下利用方法は非常に単純で、上記の様に要素にdata-xxxxといった形式で内容と位置を指定することで実装可能になっています。CSSだけなので、特にjsなどを読み込む必要なくシンプルに実装できるため、幅広いユーザーが利用しやすいライブラリになっていると思います。ソースコードはGitHubに公開されておりサンプルと共にダウンロード可能です。ライセンスはMIT License (MIT)となっており、ライセンスに従って、自由に利用す
masayoshinym 2016/10/11
CSS

ライブラリ

ツールチップ
リンク
いろいろなオプション付きのツールチップ作成CSSライブラリ・「Tootik」
Tootikは色々なオプション付きのツールチップ実装CSSライブラリです。CSSのみでツールチップを作成、オプションとして位置の設定や「成功」「注意」などの通知用、表示遅延、テキストの複数行、矢印の有無、フェードエフェクトの有無などを設定できます。設定はCSSを読み込んでカスタムデータ属性を設定すればいいだけ。ライセンスはMIT。なかなか使いやすそうです。 Tootik
masayoshinym 2016/07/05
CSS

ライブラリ

ツールチップ
リンク
Webアプリ向けに設計された非依存型で軽量なツールチップ実装スクリプト・「Popper.js」
Popper.jsは常に見やすい状態に維持してくれるツールチップ実装スクリプトです。圧縮版で3.5KBと軽量且つ非依存型で単体で動作してくれます。うまく説明出来ませんが、任意のコンテナにツールチップを表示した際、スクロール等でコンテナが隠れ始めてもツールチップだけは残ってくれる、みたいなもの。コンテナのドラッグ操作を行っても常に見える状態を保持してくれます。本スクリプトでも明示してある通りWebアプリなんかに良さそうです。これは使わせてもらうかも。見たほうが早いと思いますので以下よりご確認下さい。ライセンスはMIT。 Popper.js
masayoshinym 2016/04/07
JavaScript

ライブラリ

ツールチップ
リンク
1