【CSS】CSSで作られたシンプルなツールチップ。balloon.css

Balloon.cssはJavaScriptを使用せずCSSのわずか数行を要素に追加することでにツールチップができます。

CSS

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

data-balloonに表示させたいテキストなどを入力。

<span data-balloon="I'm a tooltip." data-balloon-pos="up">Blablabla</span>

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>

ライセンスはMIT

 

【CSS】CSSで作られたシンプルなツールチップ。balloon.css

  • LATEST
  • RELATED
  • POPULAR