CSS
【CSS】CSSで利用できる軽量ツールチップWenk
December 23, 2016

WenkはCSSで利用できる軽量ツールチップ。
CDNとインストール
<link rel="stylesheet" href="https://unpkg.com/wenk/dist/wenk.css"> <!-- Or --> <link rel="stylesheet" href="https://cdn.rawgit.com/tiaanduplessis/wenk/master/dist/wenk.css">
data-wenk
を追加
<span data-wenk="This is a tooltip!"></span>
data-wenk-posでツールチップを表示する位置を設定。
<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>
ツールチップの幅を変更することもできます。
<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>
テキストを整列させる
<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>
MIT