[CSS]さまざまなスタイルのツールチップが簡単に実装できるSassでつくられた -Simptip

Post on:2013年11月7日

sponsors

classを変更するだけで、ツールチップを表示する方向、カラーを変更したり、フェードやスライドのアニメーションで表示したりなど、さまざまなスタイルのツールチップを実装できるSassでつくられたスタイルシートを紹介します。

実装にはSassの知識は必要なく、簡単に利用できます。

Simptipのデモ

ツールチップのデモをアニメーションgifにしてみました。

左から、角丸、半アロー、スライド、フェードの4種類

これらのスタイルはclassを変更するだけで、簡単に使い分けができます。他にもさまざまなスタイルが用意されています。

当スタイルシートを外部ファイルとして記述します。

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

ツールチップのスタイルはclassで、中身はdata-tooltipに記述します。

<span class="simptip-position-top" data-tooltip="Tooltip's content"> Text </span>

用意されているツールチップのスタイルは下記の通りです。
まずは、ツールチップの表示の方向。

カラー・形状の変更やエフェクトもさまざまなものが用意されています。