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

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

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

サイトのキャプチャ

Simptip
Simptip -GitHub

Simptipのデモ

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

デモのアニメーション

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

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

Simptipの使い方

Step 1: 外部ファイル

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

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

Step 2: HTML

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

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

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

.simptip-position-top
ツールチップを上に表示。
.simptip-position-right
ツールチップを右に表示。
.simptip-position-bottom
ツールチップを下に表示。
.simptip-position-left
ツールチップを左に表示。

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

.half-arrow
アローを半分に。
.simptip-smooth
角丸に。
.simptip-fade
フェードで表示・非表示。
.simptip-movable
動きながら表示。
.simptip-multiline
複数行に対応。
.simptip-success
カラーをグリーンに。
.simptip-info
カラーをブルーに。
.simptip-warning
カラーをオレンジに。
.simptip-danger
カラーをレッドに。

top of page

©2017 coliss