いくつかのサイトで紹介されていたけれど、CSSだけで簡単にツールチップが設置できる「Wenk」。
特にこの「Wenk」がCSSだけで実現された超軽量のツールチップ。

こういった既存のものは、知っておくと便利。
特にプログラムとか苦手な人はしっかりチェックしておくことで、様々な動きに対応できます。

ツールチップの動きはこんなの

使い方

CSSを読み込ませる

使い方は簡単、まずは以下のCSSを読み込ませましょう。
参照先の違いで同じものだと思うので、どちらを使ってもいいでｓ。

<link rel="stylesheet" href="https://unpkg.com/wenk/dist/wenk.css">
<!-- Or -->
<link rel="stylesheet" href="https://cdn.rawgit.com/mightyCrow/wenk/master/dist/wenk.css">

ツールチップの位置設定

ツールチップは次のようにして上下左右のどこに出すかを指定します。
rightとかleftとか書いてあるので、見たらだいたいわかると思います。
これも指定方法は2つあるみたいだけど、どっちかでいいんだけどね。
２つあると迷うよｗ

<span data-wenk="I'm to the right!" data-wenk-pos="right">Wenk to the right!</span>
<span data-wenk="I'm to the left!" data-wenk-pos="left">Wenk to the left!</span>
<span data-wenk="I'm at the bottom!" data-wenk-pos="bottom">Wenk to the button!</span>
<!-- Or -->
<span class="wenk--right" data-wenk="I'm to the right!">Wenk to the right!</span>
<span class="wenk--left" data-wenk="I'm to the left!">Wenk to the left!</span>
<span class="wenk--bottom" data-wenk="I'm at the bottom!">Wenk to the button!</span>

ツールチップのサイズ設定

ツールチップのサイズの指定方法。
CSSでスタイル上書きした方が楽そうだけど、HTMLだけで指定したい場合はこれを使おう。

<span data-wenk="I'm small!" data-wenk-length="small">Small wenk!</span>
<span data-wenk="I'm medium!" data-wenk-length="medium">Medium wenk!</span>
<span data-wenk="I'm large!" data-wenk-length="large">Large wenk!</span>
<span data-wenk="I fit!" data-wenk-length="fit">I fit just right!</span>
<!-- Or -->
<span data-wenk="I'm small!" class="wenk-length--small">Small wenk!</span>
<span data-wenk="I'm medium!" class="wenk-length--large">Medium wenk!</span>
<span data-wenk="I'm large!" class="wenk-length--large">Large wenk!</span>
<span data-wenk="I fit!" class="wenk-length--fit">I fit just right!</span>

ツールチップの左右寄せ

ツールチップのサイズのテキストの位置指定方法。
これもCSSでスタイル上書きした方が楽そう。
pタグはいるのか？

<p><span data-wenk="I'm right!" class="wenk-align--right">Wenk to the right!</span></p>
<p><span data-wenk="I'm center!" class="wenk-align--center">Wenk in the center!</span></p>

デモはこちらで見れます。
HTMLだけで見た目を変更できるんですが、CSSで変更して使った方がいいと思います。

CSSを読み込ませるだけで簡単に使えるので、
javascriptとかわからない、でもツールチップを使ってみたいという人はどうぞ。

[RelService] [Service]