【jQuery】ツールチップを実装、Tippy.jsの使い方!!

シュウ

今回は【jQuery】ツールチップを実装、Tippy.jsの使い方!!
の解説になります！

こんな方に読んでほしい

jQueryを学び始めた方へ
プラグインのTippy.jsを使ってツールチップ(吹き出し)を作成したい方向け
今回はTippy.jsについて解説しております。

今回は、ツールチップ(吹き出し)についての解説になります。
「Tippy.js」になりますが、今でも簡単で使いやすいプラグインになっております。

イメージ図は上記のようになります。
今回の、「Tippy」はオプション項目が多くあり、ホームページに合った吹き出しを作成できます。

下記のリンク先が公式サイトになります。
Tippy.js公式サイトはこちらから

[記事の内容]

Tippyについて

Tippy.jsとは、ツールチップ(吹き出し)のことを示します。
jQueryが苦手な方でも問題ありません。

必要なファイルについて

今回は、CDNでの設置になります。
詳しい解説はこちらになります。

<!--js-->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

また、「tippy.js」を使用する際には、tippyを使用する宣言をしなければなりません。
以下のコードを合わせて指定しましょう。

<!--js-->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
	tippy('.〇〇');
</script>

「tippy.js」と繋げて記述するのが良いでしょう。
また、ファイルの階層は、ご自身のフォルダに合わせてください。

記述場所について

基本的にはbody内に指定するようにしましょう。
基本構造の書き方は以下のようになります。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>【jQuery】ツールチップを実装...</title>
</head>
<body>

　コンテンツが入ります。

<!--js-->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
	tippy('.〇〇');
</script>
</body>
</html>

「吹き出し(ツールチップ)」の設定について

次に、「吹き出し(ツールチップ)」の設定について解説します。

「吹き出し(ツールチップ)」の設定について

デモサイトはコチラから。

基本構造の書き方は以下のようになります。

「吹き出し(ツールチップ)」

<p class="tippy01">HTMLとは、ハイパーテキスト...</p>
<p class="tippy02">CSSとは、カスケーディング...</p>

tippy('.tippy01', {
  content: "HyperText Markup Language",
  placement: 'top-start',
  arrow: false
});
tippy('.tippy02', {
  content: "Cascading Style Sheets",
  placement: 'left',
  animation: 'scale',
  duration: 1000,
  arrow: false
});

「tippy01」では、contentに吹き出しの文字を指定します。
placementは、吹き出しの位置になります。
arrowは矢印になり、falseで矢印を非表示、trueで矢印を表示します。

「tippy02」では、animationを指定しております。
animationを指定する際には、CSSを指定しなければなりません。
以下を指定してください。

<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/〇〇.css"/>

animations/〇〇.css"/とは、アニメーション名を指定しなければなりません。
例:animation: 'scale'でしたら、animations/scale.css”/になります。
例:animation: 'perspective'でしたら、animations/perspective.css”/になります。

オプションについて

オプションでは、位置やアニメーションの変更が可能になります。
一部ご紹介します。

指定できる値

content
吹き出しの文字を指定します。
placement
吹き出しの位置を指定します。
指定できる値は、「top」、「left」、「bottom」、「right」、「top-start」、「top-end」など
arrow
吹き出しの矢印を指定します。
falseで矢印を非表示、trueで矢印を表示します。
animation
吹き出しのアニメーションを指定します。
animationを指定する際にはCSSの指定も忘れずにしましょう。