Balloon.css-Pure CSS3 シンプルで実用的なツールチップ ツールチップ効果 library_html/css_WEB-ITnose

簡単なチュートリアル

balloon.css は、純粋な CSS3 で作られたシンプルで実用的なツールチップ効果ライブラリです。ツールチップは簡単な設定でさまざまな場所にプロンプ​​ト ボックスを表示でき、コンテンツの量に応じてプロンプト ボックスのサイズを自動的に設定し、Unicode エンコードや Font Awesome フォント アイコンなどを表示することもできます。

デモを見る プラグインをダウンロード

使用方法

このツールチップ効果を使用するには、balloon.css またはballoon.min.css ファイルをページに導入する必要があります。

<link rel="stylesheet" href="css/balloon.css">

ツールチップの位置

さまざまなツールチップの位置は、data-balloon-pos 属性を設定することで実現できます。オプションの値は、上、下、左、または右です。

<button data-balloon="Whats up!" data-balloon-pos="up">Hover me!</button><button data-balloon="Whats up!" data-balloon-pos="left">Hover me!</button><button data-balloon="Whats up!" data-balloon-pos="right">Hover me!</button><button data-balloon="Whats up!" data-balloon-pos="down">Hover me!</button>

ツールチップの長さ

デフォルトでは、ツールチップは常に 1 行で表示されます。data-balloon-length プロパティを使用してデフォルトの動作を変更できます。オプションの値は、Small、Medium、Large、または Fit です。

<button data-balloon-length="small" data-balloon="Hi." data-balloon-pos="up">Hover me!</button> <button data-balloon-length="medium"      data-balloon="Now that's a super big text we have over here right? Lorem ipsum dolor sit I'm done."      data-balloon-pos="up">  I'm a medium tooltip.</button> <button data-balloon-length="large"      data-balloon="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!"      data-balloon-pos="up">  I'm a large tooltip</button> <button data-balloon-length="xlarge"      data-balloon="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!"      data-balloon-pos="up">  I'm a Xlarge tooltip</button> <button data-balloon-length="fit"      data-balloon="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!"      data-balloon-pos="up">  My width fill fit to element</button>

フォント アイコンを使用する

HTML 文字またはサードパーティのフォント アイコンをツールヒントに追加できます。

<button data-balloon="HTML special characters: ☻ ✂ ♜"                 data-balloon-pos="up">Hover me!</button>

Font Awesome フォントアイコンも追加できます。

すごい

balloon.css の github アドレス: https://github.com/kazzkiq/balloon.css

出典: jQuery ホーム