SHU BLOG

BLOG NEWS ブログ

TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【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の指定も忘れずにしましょう。

こちらのサイトで他にも解説しております。

その他のツールチップ(吹き出し)系のプラグインの解説は下記のURLから
【jQuery】マウスオーバーで吹き出しを実装、niceTooltipの使い方!!
【jQuery】色んな吹き出しを実装、darktooltip.jsの使い方!!
プラグインのダウンロードから設定の方法、デモサイトもご用意しております。

まとめ

今回はこれで以上です。

POINT
  • Tippyとは、吹き出し(ツールチップ)のことを示します。
  • 今回は、CDNでの設置になります。
  • animationを指定する際にはCSSの指定も忘れずにしましょう。
  • こちらにデモサイトを用意しました。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top