WordPress ツールチップ(Tooltip)の表示方法

Last Updated:2023年10月05日| コメントを残す

WordPressでマウスオーバー時にプレビュー文を表示したい場合は、簡単な方法で WordPress Tooltipsなどのツールチッププラグインを使用できます。 この記事では WordPress ツールチッププラグインの簡単な紹介とともに、HTML / CSSでツールチップを実装する方法を見てみましょう。

WordPress ツールチップ(Tooltip)の表示方法

WordPress Tooltipsプラグイン

WordPress ツールチップ(Tooltip)の表示方法

ツールチップは、ビデオ/オーディオ/画像/Googleマップ/QRコード/ウィキ/テキストなどの情報を表示する小さなポップアップボックスです。 ユーザーがマウスを移動すると、ツールチップボックスが表示されます。

このプラグインを使用して、テキスト、画像、ビデオ、オーディオ、ソーシャル(SNS)リンクなどをツールチップボックスに表示できます。 ツールチップはポストコンテンツ、ポスト要約、ポストタグ、 WordPress 아카이브、 WordPress メニュー項目、ギャラリーなどに表示できます。

この WordPress ツールチッププラグインは用語集もサポートしています。 ページやポストに [glossary] ショートコードを挿入するだけです。

WordPress 用語集ツールチップ

HTML/CSSを使用してツールチップを表示する

HTMLとCSSを使用してシンプルなツールチップを作成できます。 次のjsfiddleページで、HTML / CSSで実装された簡単なツールチップソースを確認できます。

上記のコード WordPressにショートコードで作って適用することを考えることができます。 ショートコード WordPressに追加したい場合は、次の方法でショートコードを作成できます。

テーマの関数ファイルに次のコードを追加します。 チャイルドテーマを作成して、チャイルドテーマ内の関数ファイル(functions.php)に追加します。

/*
Plugin Name: Custom Tooltips
Description: Provides a shortcode for custom tooltips.
*/

function render_tooltip_shortcode($atts, $content = null) {
    ob_start();
    ?>
    <span class="tooltip">
        <svg class="info-icon" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
            <circle cx='12' cy='12' r='10'/>
            <line x1='12' y1='16' x2='12' y2='12'/>
            <line x1='12' y1='8' x2='12.01' y2='8'/>
        </svg>
        <span class="tooltiptext"><?php echo esc_html($content); ?></span>
    </span>
    <?php
    return ob_get_clean();
}

add_shortcode('tooltip', 'render_tooltip_shortcode');

次に、チャイルドテーマ内のスタイルシートファイル(style.css)または WordPress お知らせ»外観»カスタマイズ»追加CSS次のようなコードを追加します。

/* 툴팁 스타일 */
.tooltip {
    position: relative;
    cursor: pointer;
    display: inline-block;
}

.info-icon {
    width: 16px;
    height: 16px;
}

.tooltip .tooltiptext {
    visibility: hidden;
    max-width: 300px;
    width: 12em;
    background-color: #3F51B5;  /* Blue stone color */
    font-size: 0.8em;
    color: #fff;
    text-align: center;
    border-radius: 5px;  /* Rounded corners */
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;  /* Position it right at the bottom edge of the tooltip */
    left: 50%;
    margin-left: -5px;  /* Center it horizontally */
    border-width: 5px;
    border-style: solid;
    border-color: #3F51B5 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


.info-icon {
    width: 16px;  /* Adjust width as needed */
    height: 16px;  /* Adjust height as needed */
    stroke: #3a79b8;  /* Stroke color of the SVG */
	margin-left: -5px;
}

色、ツールチップボックスサイズなどは適宜変更できます。

次に、ツールチップを表示する場所に次の形式でショートコードを追加します。

[tooltip]Tootip Text[/tooltip]

たとえば、[tooltip] HTMLとCSS標準の共同責任者であるW3Cは、明確で表象的なマークアップのためにCSSを使用することをお勧めします。同様に、ツールチップポップアップが表示されます。

WordPress ツールチップ(Tooltip)の表示方法

最後に、

Naver カフェにマウスオーバー時に説明文(ツールチップ)を表示する方法についての質問が上がり、ここについてまとめてみました。 プラグインを使用すると便利ですが、追加のプラグインインストールを好まない場合は、上記のコードを使用できます。

「ワープ社」 Naver カフェに加入して WordPress 関連情報を共有し、ご質問があります。

参照


コメントを残す

コメント