ショートコードでツールチップ（語句の説明）をポップアップ表示させる方法の一例

文章中の語句に対して、マウスオーバーするとポップアップ風の説明文を出す、いわゆるツールチップ機能をWordPressの投稿や固定ページで使えるようにする方法の一例を紹介します。

この機能を実装しようと検索すると、一旦HTMLで編集にして、spanタグを入れる方法がたくさん紹介されていますが、いちいち切り替えるのも大変だし、クラス設定するのも面倒なので、本ページでは、ショートコードを使って任意の場所へ簡単に入れられるようにしていきます。

CSSだけで動作させるので軽量ですが、その分複雑なことはできないのであしからず。

どんな感じになるのかは、ここ（ツールチップだよ）マウスオーバー時に表示される説明文だよ！マウスオーバー時に表示される説明文だよ！マウスオーバー時に表示される説明文だよ！をマウスオーバーしてみてください（色などは適当です．．）。

このページ内の随所にこの機能を使ったツールチップを入れていますので、点線の入った部分をマウスオーバーして雰囲気を確認してみてください。結構親切なコンテンツができるかも．．

CSSを使ったツールチップ機能の原理と仕組み

今回のツールチップ単語をマウスオーバーすることで表示される説明ポップアップ表示のことです機能は以下のスタイルコードで実装可能です。

え？これだけ．．って感じですね。

/*** CSSでツールチップ表示 ***/
/* ツールチップ本体 */
.tooltip {
    position: relative;
    display: inline-block;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: #777;

}

/* 表示されるツールチップの内容 */
.tooltip .tooltip-text {
	visibility: hidden;
	width:25em;
	background-color: #eee;
	border:1px solid #777;
	border-radius: 2px;
	color: var(--wp--preset--color--foreground);
	text-align: left;
	padding: 2px 8px;
	position: absolute;
	font-size:0.8em;
	z-index: 999;
	bottom:120%;
	left:0;
}

/* 吹き出し風にする */
.tooltip .tooltip-text:before {
	content: "";
	border: 10px solid transparent;
	border-top: 10px solid #777;
	position: absolute;
	top: 100%;
	left: 5%;
	transform: translateX(-50%);
}

/* ホーバー時に表示 */
.tooltip:hover .tooltip-text {
	visibility: visible;
	animation: fade 1s ease-out forwards;
}

@keyframes fade{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

以下のような原理（仕組み）で機能します。

• 「tooltip」というクラスのついたタグの中にマウスオーバーで説明を表示させたい文字列を入れる
• 「tooltip-text」というクラスの付いたタグを「tooltip」クラスのタグの中へ封入
• 「tooltip-text」クラスの付いたタグの中にマウスオーバー時に表示する説明文を入れる
• 「tooltip」を標準では「visibility: hidden;」で非表示にしておき、マウスオーバー時（ホーバー時）には「visibility: visible;」で表示させる

WordPressの段落ブロックなどで文字を入力すると、pタグが補完される（HTMLで編集に切り替えるとわかります）ので、「tooltip」「tooltip-text」のタグはspanで囲みます（divタグなどにするとエラーが出ます）。

一応ここ（ツールチップだよ）マウスオーバー時に表示される説明文だよ！マウスオーバー時に表示される説明文だよ！マウスオーバー時に表示される説明文だよ！をマウスオーバーすると、今回実装するツールチップ表示になりますので見てみてください。

どんな動きをするの？という方は、以下の手順で、貴サイトへ試しに実装してみてください。

ツールチップの簡易実装方法

このカスタマイズはテーマのstyle.cssまたはテーマカスタマイザーの追加CSSへのコード追記が必要です。前者の場合は子テーマの使用をおすすめします

以下のコードをテーマのstyle.cssまたはテーマカスタマイザーの追加CSSへ追記して保存します。

/*** CSSでツールチップ表示 ***/
/* ツールチップ本体 */
.tooltip {
    position: relative;
    display: inline-block;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: #777;

}

/* 表示されるツールチップの内容 */
.tooltip .tooltip-text {
	visibility: hidden;
	width:25em;
	background-color: #eee;
	border:1px solid #777;
	border-radius: 2px;
	color: #000;
	text-align: left;
	padding: 2px 8px;
	position: absolute;
	font-size:0.8em;
	z-index: 999;
	bottom:120%;
	left:0;
}

/* 吹き出し風にする */
.tooltip .tooltip-text:before {
	content: "";
	border: 10px solid transparent;
	border-top: 10px solid #777;
	position: absolute;
	top: 100%;
	left: 5%;
	transform: translateX(-50%);
}

/* ホーバー時に表示 */
.tooltip:hover .tooltip-text {
	visibility: visible;
	animation: fade 1s ease-out forwards;
}

@keyframes fade{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

テスト用の投稿を新規作成し、「カスタムHTML」ブロックを挿入後、以下のコードを挿入します。

<p>一応<span class="tooltip">ここ（ツールチップだよ）<span class="tooltip-text">マウスオーバー時に表示される説明文だよ！マウスオーバー時に表示される説明文だよ！マウスオーバー時に表示される説明文だよ！</span></span>をマウスオーバーすると、今回実装するツールチップ表示になりますので見てみてください。</p>

下書き保存した後、「プレビュー」→「新しいタブでプレビュー」をクリックして、動作を確認してみてください（上のサンプルと同じものが出来上がります）。

環境によってはスタイルが即適用されない場合があるので、動かない場合はキーボードの「Ctrl」＋「F5」を押してキャッシュをクリアしてみてください

デザイン部分の詳細や変更方法については、本ページの主旨とは外れてしまうので、割愛します。まあ、多分色の変更や角丸のスタイル位を変更すればよいかと思いますので、適宜行ってください。

以上．．じゃなかった、試しにコピペ「コピーアンドペーストの略」してもらいましたが、毎回ツールチップを入れたいところをHTML編集に切り替えて、spanタグを入れて．．って、実際にやってみてもらうと、冒頭で触れたようにとっても面倒なので、ここからはこの機能をショートコードで挿入できるようにしていきます。

ツールチップショートコードの作り方

今流行りの？ブロックにしてしまうと、段落の文章内などに挿入することが逆に大変になる（と現時点での私の知識ではそう認識している）ので、自由にどこでも挿入できるショートコードで作成するのがよいかと思います。

いろいろなショートコードの作り方の基本については以下で紹介していますので、気になる方は読んでみてください。

で、今回は、自己完結型ショートコード1つの囲み枠で完結するタイプのショートコードですにパラメーターを付けたものを使います。

以下がコピー用コードです。有効化しているテーマのfunctions.phpWordPressの動作をテーマ側から指示するプログラムコードの格納場所ですへ貼り付けます。

/***** ツールチップショートコード *****/
if ( !function_exists( 'sample_tooltip_shortcode' ) ){
function sample_tooltip_shortcode( $atts ) {
	$atts = shortcode_atts(
		array(
			'title' => 'Title',
			'text' => 'Text A',
		),$atts);

	if(empty($atts['title'])){
		$atts['title'] = 'Your Title';
	}else{
		$atts['title'] = $atts['title'];
	}

	if(empty($atts['text'])){
		$atts['text'] = 'Your text';
	}else{
		$atts['text'] = $atts['text'];
	}

$main_be = '<span class="tooltip">';
$main_af = '</span>';
$output_title = esc_html($atts['title']);
$output_text = esc_html($atts['text']);
$text_be = '<span class="tooltip-text">';
$text_af = '</span>';

	return $main_be.$output_title.$text_be.$output_text.$text_af.$main_af;
}
}
add_shortcode('sample-tooltip', 'sample_tooltip_shortcode');

追加したら、デザインは前項のものをそのまま使うので、style.cssやテーマの追加CSSへコピーしてください

投稿の新規作成、または既存の投稿の編集画面を開き、以下のショートコードを入れて、プレビューしてみてください。

[sample-tooltip title="" text =""]

これを入れると→「Your TitleYour text」←のように表示されますね。「Your Title」という部分をマウスオーバーすると、ポップアップが開き、「Your Text」という説明文が表示される仕組みです。

ショートコード内の「title=””」を「title=”マウスオーバー”」に、「text=””」を「text =”ツールチップの内容だぞ！ツールチップの内容だぞ！ツールチップの内容だぞ！ツールチップの内容だぞ！ツールチップの内容だぞ！”」にすれば、以下のように表示できます。

ここを→マウスオーバーツールチップの内容だぞ！ツールチップの内容だぞ！ツールチップの内容だぞ！ツールチップの内容だぞ！ツールチップの内容だぞ！←すると、ツールチップの内容が表示されます。

ショートコードのいいところは前述したように、文章の途中に挿入しても動作してくれることです。段落ブロックの途中や、テーブルブロックのセルに入れても動作しますからとっても便利ですネ。

CSSとセットで出力するようにしておくと管理が簡単かも

ここまでは、ショートコード機能はテーマのfunctions.phpへ、スタイルはテーマのstyle.cssやテーマカスタマイザーの追加CSSへ追加するという2か所への記述をしていました。

この方法だと、どちらかのコードを見た時に、このスタイルコードは何だっけ？このPHPコードはなんだっけ？となり、メンテナンスをしたり、テーマを移行したりするときに戸惑うこともあると思います。

そこで、どちらかにまとめる方法として、デザインコードをPHPからインラインで出力する方法を紹介しておきます。この方法を使えば、今回のカスタマイズでstyle.cssなどに追加したスタイルコードは必要なくなります。

以下のコードをテーマのfunctions.phpへ追加します。

/*** フロントエンド用スタイルの読み込み ***/
if ( !function_exists( 'sample_enqueue_frontend_style' ) ){
function sample_enqueue_frontend_style(){
	//スタイルシートの登録
wp_register_style( 'front-custom-style', get_theme_file_uri() .'/front-custom-style.css', array('twentytwentytwo-style'),null, 'all' );

//スタイルシートの読み込み
	wp_enqueue_style('front-custom-style');
}
}
add_action('wp_enqueue_scripts','sample_enqueue_frontend_style');

/*** フロントエンド用スタイルにインライン出力 ***/
if ( !function_exists( 'sample_tooltip_style_init' ) ){
function sample_tooltip_style_init(){
$custom_css_pre = '
/* ツールチップのスタイル */
.tooltip {
position: relative;
display: inline-block;
text-decoration-line: underline;
text-decoration-style: dotted;
text-decoration-color: #777;
}
.tooltip .tooltip-text {
visibility: hidden;
width:25em;
background-color: #eee;
border:1px solid #777;
border-radius: 2px;
color: #000;
text-align: left;
padding: 2px 8px;
position: absolute;
font-size:0.8em;
z-index: 999;
bottom:120%;
left:0;
}
.tooltip .tooltip-text:before {
content: "";
border: 10px solid transparent;
border-top: 10px solid #777;
position: absolute;
top: 100%;
left: 5%;
transform: translateX(-50%);
}
.tooltip:hover .tooltip-text {
visibility: visible;
animation: fade 1s ease-out forwards;
}
@keyframes fade{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
';

//スタイルコードを改行なしで整形する
	$custom_css = str_replace(PHP_EOL, '', $custom_css_pre);

//インラインで出力
	wp_add_inline_style( 'front-custom-style', $custom_css );
}
}
add_action('wp_enqueue_scripts','sample_tooltip_style_init');

追加して保存したら、style.cssなどに追加したツールチップ用のスタイルコードを削除した上で、ツールチップショートコードを入れた投稿のプレビューを行って見てください。

ね？きちんとツールチップになってますよね？これで、コードが2か所になってしまう問題は解決です。

これをインラインスタイルの出力というのですが、コードについて詳しくは以下をご覧ください。

おまけ　すぐに呼び出せるようにしておくとなおGOOD!

これも「いろいろな種類のショートコードの作り方をおさらい」で触れている事柄です。せっかくショートコードを作っても、簡単に呼び出せなければ意味がない（いちいち覚えてられない）ので、ブロックエディターWordPress5.0から採用された、ブロック挿入形式の編集機能ですの機能であるブロックパターン複数のブロックを定型文として登録し、簡単に呼び出せる機能ですに登録して呼び出せるようにしておきましょう。

テーマのfunctions.phpへ以下のコードを貼り付けます。

/***** ブロックパターンカテゴリーの登録 *****/
if ( !function_exists( 'sample_sc_block_pattern_category_init' ) ){
function sample_sc_block_pattern_category_init(){
	register_block_pattern_category('original-pattern-category', ['label' => __('Original Shortcode','textdomain')]);
}
}
add_action('init','sample_sc_block_pattern_category_init');


/* ツールチップブロックパターンの登録 */
if ( !function_exists( 'sample_tp_block_patterns_init' ) ){
function sample_tp_block_patterns_init(){
  $pattern = [
    "title" => __('Tooltip Shortcode','textdomain'),
    "categories" => ["original-pattern-category"],
    "descripiton" => '',
    "content" => '<!-- wp:shortcode -->[sample-tooltip title="タイトルを入力" text ="説明を入力"]<!-- /wp:shortcode -->',
  ];

  register_block_pattern($pattern["title"], $pattern);
}
}
add_action('admin_init', 'sample_tp_block_patterns_init');

追加後、投稿編集画面を開き（既に開いている場合にはリロードして）、ブロックパターンを呼び出すと、以下のように「Original Shortcode」というカテゴリーが追加され、選択すると「Tooltip Shortcode」というツールチップのブロックパターンが選択できるようになります。

クリックすると、ショートコードブロックが挿入され、中に以下のショートコードが入っています。

[sample-tooltip title="タイトルを入力" text ="説明を入力"]

この部分をコピーして、ツールチップ化したい場所へ貼り付け、タイトルや説明文を変えればハイ出来上がり！！です。

これでショートコードなんだっけ？となることも防げますね！

完成したコードまとめ

ここまで、ツールチップ機能をショートコードで実装する方法を以下の順に紹介してきました。

• ショートコードでツールチップを出力できるようにする
• CSSを同梱する
• ブロックパターンに登録してすぐに呼び出せるようにする

最後にすべてのコードをひとまとめにしたものを掲載しておきますので、ひとまずドーンと実装したい方はこちらをお使いください。

/***** ツールチップショートコード *****/
/*** ショートコード機能の実装 ***/
if ( !function_exists( 'sample_tooltip_shortcode' ) ){
function sample_tooltip_shortcode( $atts ) {
	$atts = shortcode_atts(
		array(
			'title' => 'Title',
			'text' => 'Text A',
		),$atts);

	if(empty($atts['title'])){
		$atts['title'] = 'Your Title';
	}else{
		$atts['title'] = $atts['title'];
	}

	if(empty($atts['text'])){
		$atts['text'] = 'Your text';
	}else{
		$atts['text'] = $atts['text'];
	}

$main_be = '<span class="tooltip">';
$main_af = '</span>';
$output_title = esc_html($atts['title']);
$output_text = esc_html($atts['text']);
$text_be = '<span class="tooltip-text">';
$text_af = '</span>';

	return $main_be.$output_title.$text_be.$output_text.$text_af.$main_af;
}
}
add_shortcode('sample-tooltip', 'sample_tooltip_shortcode');

/*** スタイルをインラインで出力 ***/
/* フロントエンド用スタイルの読み込み */
if ( !function_exists( 'sample_enqueue_frontend_style' ) ){
function sample_enqueue_frontend_style(){
	//スタイルシートの登録
wp_register_style( 'front-custom-style', get_theme_file_uri() .'/front-custom-style.css', array('twentytwentytwo-style'),null, 'all' );

//スタイルシートの読み込み
	wp_enqueue_style('front-custom-style');
}
}
add_action('wp_enqueue_scripts','sample_enqueue_frontend_style');

/* フロントエンド用スタイルにインライン出力 */
if ( !function_exists( 'sample_tooltip_style_init' ) ){
function sample_tooltip_style_init(){
$custom_css_pre = '
/* ツールチップのスタイル */
.tooltip {
position: relative;
display: inline-block;
text-decoration-line: underline;
text-decoration-style: dotted;
text-decoration-color: #777;
}
.tooltip .tooltip-text {
visibility: hidden;
width:25em;
background-color: #eee;
border:1px solid #777;
border-radius: 2px;
color: #000;
text-align: left;
padding: 2px 8px;
position: absolute;
font-size:0.8em;
z-index: 999;
bottom:120%;
left:0;
}
.tooltip .tooltip-text:before {
content: "";
border: 10px solid transparent;
border-top: 10px solid #777;
position: absolute;
top: 100%;
left: 5%;
transform: translateX(-50%);
}
.tooltip:hover .tooltip-text {
visibility: visible;
animation: fade 1s ease-out forwards;
}
@keyframes fade{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
';

//スタイルコードを改行なしで整形する
	$custom_css = str_replace(PHP_EOL, '', $custom_css_pre);

//インラインで出力
	wp_add_inline_style( 'front-custom-style', $custom_css );
}
}
add_action('wp_enqueue_scripts','sample_tooltip_style_init');

/*** ブロックパターンの登録 ***/
/* ブロックパターンカテゴリーの登録 */
if ( !function_exists( 'sample_sc_block_pattern_category_init' ) ){
function sample_sc_block_pattern_category_init(){
	register_block_pattern_category('original-pattern-category', ['label' => __('Original Shortcode','textdomain')]);
}
}
add_action('init','sample_sc_block_pattern_category_init');

/* ツールチップブロックパターンの登録 */
if ( !function_exists( 'sample_tp_block_patterns_init' ) ){
function sample_tp_block_patterns_init(){
  $pattern = [
    "title" => __('Tooltip Shortcode','textdomain'),
    "categories" => ["original-pattern-category"],
    "descripiton" => '',
    "content" => '<!-- wp:shortcode -->[sample-tooltip title="タイトルを入力" text ="説明を入力"]<!-- /wp:shortcode -->',
  ];

  register_block_pattern($pattern["title"], $pattern);
}
}
add_action('admin_init', 'sample_tp_block_patterns_init');

後述

こうして何かのコードを実装するケースの紹介ページってどうやっても長くなりますね。

同じことの繰り返し感が強かったですが、ただ実装ではなくいろいろな手法を伝えたかったのでご容赦ください。

今回のカスタマイズをする中で、「ショートコードのパラメーターにHTMLタグを入れると動作がおかしくなる？」という疑問が湧きました。

このショートコードで出力されるのがspanタグなので、気軽に改行（br）タグを入れたら普通に改行されるんじゃないか？と試して発見しました。

この対処方法についてはいろいろ調べてみたものの、明快な解決（つまり不具合が起きない）方法が見つからなかったので、後の宿題としておきます。

長文にお付き合いいただきありがとうございました。

実際にこのページのコードを使って見た方、ぜひコメントをお寄せいただければ幸いです（誹謗中傷はご遠慮願います）。