Javascript

【Javascript】軽量のJavaScriptのツールチップライブラリTippy.js

April 5, 2017
tippy

Tippy.jsは軽量のJavaScriptのツールチップライブラリ。

Getting started

CSS

<link rel="stylesheet" href="css/tippy.css">

JS

<script src="js/tippy.js"></script>

Creating a tooltip

title要素を加え、ツールチップ表示されるテキストを入力

<button class="btn tippy" title="I'm a tooltip!">Text</button>

Tippyインスタンスを作成

new Tippy('.tippy')

Example:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="tippy.css">
  </head>
  <body>
    <button id="myId" title="Tooltip text">Button text</button>
    <script src="tippy.js"></script>
    <script>
    new Tippy('#myId')
    </script>
  </body>
</html>

MIT