Jqueryでツールチップ

2025年5月16日 JQuery,ツールチップ

動きを実現する仕組み

Tippy.js というツールチップを実装するライブラリを使い、文章やボタンにカーソルを合わせると補足情報が表示されるツールチップを実現する。 ［使用するライブラリ］ ＊ Tippy.js（https://atomiks.github.io/tippyjs）


STEP1　HTMLコード


①　（任意）head終了タグ直前にツールチップ出現用のアニメーションと色指定のCSSを読み込みます。※読み込まなくても動作します。 

<head>
  <!--ツールチップ出現用のアニメーションを指定するCSS。※導入方法は後程解説。読み込まなくてもフェードインで出現します。-->
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/tippy.js@5.0.3/animations/shift-toward-subtle.css">
  
  <!--ツールチップの色を指定するCSS。。※導入方法は後程解説。読み込まなくても黒色で出現します。-->
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/tippy.js@5.0.3/themes/light-border.css">
</head>

②　body内のツールチップを表示させたい場所にHTMLを記載します。 

<!--◆文章の場合-->
<p>文章の<span class="cap" data-tippy-content="キャプションが入ります。">この部分にカーソルをあわせると</span>ツールチップが出現します</p>

<!--◆ボタンの場合-->
<button class="cap" data-tippy-content="<p>ツールチップにはHTML も使えます。</p>">ボタン</button>

③　body 終了タグ直前にTippy.js で必要なJavaScript、Tippy.js、動きを制御する自作のJS の3つを読み込みます。 

<!--ツールチップを出すためのJS-->
<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5"></script>

<!--ツールチップのJSを制御するための自作のJS-->
<script src="js/9-3-1.js"></script>

</body>

④　WordpressでのfunctionでのCDNとファイルの読み込みは下記より。 

//CDN形式のCSSとJSの読み込み
function add_my_files() {
  wp_enqueue_style(
  'tooltips-anime',  //$handle
  '//unpkg.com/tippy.js@5.0.3/animations/shift-toward-subtle.css'  //$src
  );
wp_enqueue_style(
  'tooltips-color',  //$handle
  '//unpkg.com/tippy.js@5.0.3/themes/light-border.css'  //$src
  );
  wp_enqueue_script(
    'jquery3.1.1',  //$handle
    '//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js',  //$src
    array(),  //$deps
    null,  //$ver
    true  //$in_footer
    );
   wp_enqueue_script(
    'tooltips1',  //$handle
    '//unpkg.com/popper.js@1',  //$src
    array(),  //$deps
    null,  //$ver
    true  //$in_footer
    );
   wp_enqueue_script(
    'tooltips2',  //$handle
    '//unpkg.com/tippy.js@5',  //$src
    array(),  //$deps
    null,  //$ver
    true  //$in_footer
    );
}
add_action( 'wp_enqueue_scripts', 'add_my_files' );
//CSSとJSの読み込み
function my_enqueue_scripts()
{
  $version = wp_get_theme()->get( 'Version' );
  wp_enqueue_style('index-style', get_template_directory_uri() . '/css/index.css', array(), $version);
  wp_enqueue_style('singular-style', get_template_directory_uri() . '/css/singular.css', array(), $version);
  wp_enqueue_style('content-style', get_template_directory_uri() . '/css/content.css', array(), $version);
  wp_enqueue_style('archive-style', get_template_directory_uri() . '/css/archive.css', array(), $version);
  wp_enqueue_style('comments-style', get_template_directory_uri() . '/css/comments.css', array(), $version);
  wp_enqueue_style('404-style', get_template_directory_uri() . '/css/404.css', array(), $version);
  wp_enqueue_style('search-form-style', get_template_directory_uri() . '/css/searchform.css', array(), $version);
  wp_enqueue_style('search-style', get_template_directory_uri() . '/css/search.css', array(), $version);
  wp_enqueue_style('sidebar-style', get_template_directory_uri() . '/css/sidebar.css', array(), $version);
  wp_enqueue_style('header-style', get_template_directory_uri() . '/css/header.css', array(), $version);
  wp_enqueue_style('footer-style', get_template_directory_uri() . '/css/footer.css', array(), $version);
  wp_enqueue_style('navi-style', get_template_directory_uri() . '/css/navi.css', array(), $version);
  wp_enqueue_style('navi-accordion-style', get_template_directory_uri() . '/css/navi-accordion.css', array(), $version);
  wp_enqueue_style('catego-navi-style', get_template_directory_uri() . '/css/catego-navi.css', array(), $version);
  wp_enqueue_style('button-style', get_template_directory_uri() . '/css/button.css', array(), $version);
  wp_enqueue_script('navi-script', get_template_directory_uri() . '/js/navi.js', array('jquery'), $version, true);
  wp_enqueue_script('catego-navi-script', get_template_directory_uri() . '/js/catego-navi.js', array('jquery'), $version, true);
  wp_enqueue_script('page-top-script', get_template_directory_uri() . '/js/page-top.js', array('jquery'), $version, true);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

⑤　header.phpの>head>内で下記を使って読み込み。 

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--スタイルシートの呼び出し-->
<?php wp_head(); ?><!--システム・プラグイン用-->


CSSでコーディング


STEP2　cssコード


■ツールチップが出現する際のアニメーションと色を設定する方法 1-1. ツールチップが出現する際のアニメーションの設定方法 https://unpkg.com/browse/tippy.js@5.0.3/animations/ よりアニメーションの動きを取り入れたいCSSを選択。

参考ページはコチラから



Jqueryを使ってJSコード作成


STEP3　JSコード


tippy('.cap', {//指定した要素にツールチップが出現
	placement: 'top-start',//ツールチップの表示位置⇒top、top-start、top-end、right、right-start、right-end、bottom、bottom-start、bottom-end、left、left-start、left-end。指定をしなくてもtopに表示
	animation: 'shift-toward-subtle',//ツールチップ出現の動き。動きを指定するにはhttps://unpkg.com/browse/tippy.js@5.0.3/animations/から任意の動きを選び内に読み込むことが必要。使用できる動き⇒shift-away、shift-away-subtle、shift-away-extreme、shift-toward、shift-toward-subtle、shift-toward-extreme、scale、scale-subtle、scale-extreme、perspective、perspective-subtle、perspective-extreme。指定をしなくてもfadeで表示
	theme: 'light-border',//ツールチップのテーマの色。色を指定するにはhttps://unpkg.com/browse/tippy.js@5.0.3/themes/からテーマを選び内に読み込んで指定する。テーマの種類⇒light、light-border、material、translucent。指定をしなくても黒色で表示
	duration: 200,//ツールチップの出現の速さをミリ秒単位で指定
}
)

動作確認は下記から


See the Pen Untitled by K O (@K-O-the-builder) on CodePen.