スタイルシートだけで実現しますよ！ 訪問者向けにちょっとしたヘルプを出したい時に使えるのがツールチップです。しかし表示する際にJavaScriptを組み込んだり複雑な指定をしないといけないのでは使い勝手が悪いですよね。 そこで使ってみて欲しいのがSimptipになります。CSSを読み込むだけで使えてしまうツールチップです。 使い方は簡単で、Simptipを読み込むだけです。

<link rel="stylesheet" type="text/css" href="simptip-mini.css" />

これで準備は完了です。例えば文字列の上にツールチップを出す場合、次のように指定します。

<span class="simptip-position-top" data-tooltip="I'm in top">position top</span>

実際の表示は次のようになります。

表示例

ここで面白いのはツールチップとして出す文字をdata-tooltipという指定でできる点です。Simptipのスタイルシートを見ると次のように書かれています。

[data-tooltip]:after {
  height: 22px;
  padding: 11px 11px 0 11px;
  font-size: 13px;
  line-height: 11px;
  content: attr(data-tooltip);
  white-space: nowrap;
}

**attr(data-tooltip)**で使えるのですね（知らなかった…不勉強でした）。そして表示場所の制御はもちろんのこと、表示に際してアニメーションも指定できます。

<span class="simptip-position-bottom simptip-movable half-arrow simptip-multiline simptip-info" data-tooltip="I'm a multiline tooltip with movable effect and half arrow for information">movable effect</span>

例えばこれはsimptip-movableという指定によるアニメーションで、さらにsimptip-multiline指定によって複数行をサポートしています。いずれもスタイルシートのクラス指定だけで使えるのが便利ですね。

その他のデモを紹介します。

右側に表示。

色が異なる版。info/success/warning/errorなどがあります。この辺りはBootstrapを踏襲していますね。

ハーフアロー。矢印部分が半分です。

ソフトエッジ。いわゆる角丸です。

Simptipの利点は何と言ってもスタイルシートを読み込むだけで使えると言う点でしょう。JavaScriptを使わないのでデザイナーの方でも安心して導入ができるはずです。

CSS3によってスタイルシートの機能も大幅に向上しています。それらを学び、使いこなせればJavaScriptを使わずとも多彩な表現が可能になるでしょう。

SimptipはSass/CSS3製のオープンソース・ソフトウェア（MIT License）です。

デモ arashmanteghi/simptip