CSSだけでツールチップを実装できる「Wenk.css」(超軽量)

CSSだけでツールチップを実装できる「Wenk.css」(超軽量)
Wenk.css

Wenk.cssはCSSだけでツールチップを実装できるCSSライブラリです。gzipに圧縮すれば701バイトと超軽量です。

必要十分な機能が備わっており、シンプルで使いやすいツールチップ用CSSです。

CSS、Less、SCSSファイルがダウンロードできます。

人気の記事

ボタンにホバーするとツールチップを表示するCSS Balloon.css
ボタンにホバーするとツールチップを表示するCSS Balloon.css
スポンサーリンク

Wenk.cssの特徴

  • ツールチップの表示位置は上下左右を指定可能
  • ツールチップの横幅は小、中、大、コンテンツの横幅にフィットを指定可能
  • ツールチップ内の表示テキストは左寄せ(デフォルト)、中央寄せ、右寄せを指定可能

ツールチップのサンプル

デモ

デモページを用意しました。

使い方

ダウンロード

最新バージョンはGitHubの右側にある「Clone or download」の中にある「Download ZIP」ボタンからダウンロードすることができます。

ダウンロード

ZIPファイルを展開して、「dist」フォルダに入っているwenk.min.cssを使います。

CSS

wenk.min.cssを読み込みます。

HTML

ツールチップ内に表示するテキストはdata-wenk=""で指定します。

ツールチップの表示位置

  • 上に表示: デフォルト
  • 右に表示: data-wenk-pos="right"
  • 左に表示: data-wenk-pos="left"
  • 下に表示: data-wenk-pos="bottom"

ツールチップの横幅

  • 表示サイズ 小: data-wenk-length="small"
  • 表示サイズ 中: data-wenk-length="medium"
  • 表示サイズ 大: data-wenk-length="large"
  • 表示サイズ コンテンツにフィット: data-wenk-length="fit"

表示テキストの位置

  • 左寄せ: デフォルト
  • 右寄せ: data-wenk-align="right"
  • 中央寄せ: data-wenk-align="center"
スポンサーリンク

みんなが見ている記事

コメントを投稿する

  • Posted on 2016.10.05
  • Views 402