【WordPress】画像つきツールチップのサンプル

画像つきツールチップ（あるいはHover）を探していました。＜img＞タグを使用して比較的簡単に作れるのですね。（最後に画像があります）

画像つきツールチップを参考にしたサイト：http://kachibito.net/snippets/a-simple-tooltip-with-images-and-text

オリジナル

まずは参考にさせていただいたサイトのオリジナルコードを

HTML

<a class="tip_trigger" href="javascript:void(0);">ツールチップの出るリンク<span class="tip" style="width: 500px;"><img src="01.png">このspanの中身がツールチップ。画像も入れられる</span></a><a class="tip_trigger" href="javascript:void(0);">
</a>

JavaScript＆CSS

$(document).ready(function() {
    //ホバーイベント発火
    $(".tip_trigger").hover(function(){
        //class="tip_trigger"内からclass="tip"を探す
        tip = $(this).find('.tip');
        tip.show(); //表示
    }, function() {
        tip.hide(); //非表示   
         
    //ここからマウスムーブイベント    
    }).mousemove(function(e) {
        var mousex = e.pageX + 20; //位置を取得
        var mousey = e.pageY + 20; //同上
        var tipWidth = tip.width(); //幅を取得
        var tipHeight = tip.height(); //高さを取得
         
 
        var tipVisX = $(window).width() - (mousex + tipWidth);
        var tipVisY = $(window).height() - (mousey + tipHeight);
           
        if ( tipVisX < 20 ) { //X座標を超えた場合は幅を調節
            mousex = e.pageX - tipWidth - 20;
        } if ( tipVisY < 20 ) { //Y座標を超えた場合は高さを調節
            mousey = e.pageY - tipHeight - 20;
        } 
        tip.css({  top: mousey, left: mousex });
    });
});

.tip {
    color: #fff;
    background:#1d1d1d;
    display:none; /*--基本は非表示--*/
    padding:10px;
    position:absolute;    z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
     
}
a{text-decoration:none;}
p{margin:25px;width:500px;}

基本となるのが上記のHTMLです。「01.png」の代わりに入れたい画像を、「このspanの中身がツールチップ。画像も入れられる」の代わりに入れたいテキストを入れれば、一応できます。

JavaScriptとCSSは「Simple Custom CSS and JS」プラグインに入れます（CSSに関してはテーマエディタや追加CSSに入れても良いのですが、このプラグインを使用したほうがスッキリします）。

カスタマイズ

Shortcoderプラグインへの適用

使いまわしのために、上記のHTMLを「Shortcoder」プラグインに適用させます。そのままですと、エラーとなって保存できませんでした。試行錯誤のうえ、次のようにしました（まだ完成ではありません）。

<span class="tip_trigger">%%title%%<span class="tip" style="width: 700px;"><img src="%%pic%%">%%text%% </span></span>

どうやら「href="javascript:void(0);」の記述が「Shortcoder」でエラーを引き起こすようでした。そして＜a class=＞文を＜span＞タグに変えました。これにより文中に改行を入れずに挿入できます。「%%title%%」、「%%pic%%」、「%%text%%」はパラメータです。画像ですので更に以下のように追記しました（まだ完成ではありません）。

<span class="tip_trigger">%%title%%<span class="tip" style="width: 700px;"><img src="%%pic%%" alt="%%title%%" align ="left" loading="lazy" width="150" height="150">%%text%%</span></span>

alt属性は必須ですので、%%title%%をそのまま入れました。align="left"とすることにより、説明文が画像と上端揃えになります。指定がありませんと、デフォルトでは画像の下端揃えです。loading="lazy"は画像の非同期読み込みです。widthとheightはお好みで書き換えてください。

align="right"としますと、画像が右側に移動します。

外部ファイルから読み込み

使いまわしするにあたり、%%text%%を外部ファイルから読み込んで、外部ファイルの中を編集すればこれが適用されている全てに反映されるようにしたかったので、次のようにしてみました（まだ完成ではありません）。

<span class="tip_trigger">%%title%%<span class="tip" style="width: 700px;"><img src="%%pic%%" alt="%%title%%" align ="left" loading="lazy" width="150" height="150"><object="/tmp/%%title%%.txt"></object></span></span>

＜object＞にせよ何にせよ＜img＞文の説明文にタグが入れられないようでした。これをすると説明文に何も表示されなくなります。

困りました。しばらく考えた後「外部ファイルではなくてショートコードで入れられないだろか？」と考えて次のようにしました（ショートコードは完成です）。

<span class="tip_trigger">%%title%%<span class="tip" style="width: 700px;"><img src="%%pic%%" alt="%%title%%" align ="left" loading="lazy" width="150" height="150"></span></span>

CSSのカスタマイズ（完成形）

＜a＞タグと＜p＞タグのCSSを削除して、.tip_triggerに下線と下線の色を付けてみました。説明文の色を黄色に変えました。カスタマイズしてご利用ください。

.tip {
    color: #ffff00;/*文字色：黄色*/
    background:#1d1d1d;
    display:none; /*--基本は非表示--*/
    padding:10px;
    position:absolute;    z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
     
}
.tip_trigger {
	text-decoration:underline;/*下線*/
	text-decoration-color:#00FF00;/*下線：緑色*/
}

<span class="tip_trigger">沈月<span class="tip" style="width: 700px;"><img src="https://meian-blog.net/download/00.jpg" alt="沈月" align ="left" loading="lazy" width="150" height="150">主な出演作：ドラマ『致我们单纯的小美好』『流星花园2018』『七月与安生』『我好喜欢你』『我亲爱的“小洁癖”』『机智的上半场』『我的反派男友』（以下配信待ち）『月刊少女野崎君』『月刊少女』<br>
映画『侍神令』『一周的朋友』</span></span>

.tip {
    color: #ffff00;/*文字色：黄色*/
    background:#1d1d1d;
    display:none; /*--基本は非表示--*/
    padding:10px;
    position:absolute;    z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
     
}

$(document).ready(function() {
    //ホバーイベント発火
    $(".tip_trigger").hover(function(){
        //class="tip_trigger"内からclass="tip"を探す
        tip = $(this).find('.tip');
        tip.show(); //表示
    }, function() {
        tip.hide(); //非表示   
         
/*    //ここからマウスムーブイベント    
    }).mousemove(function(e) {
        var mousex = e.pageX + 20; //位置を取得
        var mousey = e.pageY + 20; //同上
        var tipWidth = tip.width(); //幅を取得
        var tipHeight = tip.height(); //高さを取得
         
 
        var tipVisX = $(window).width() - (mousex + tipWidth);
        var tipVisY = $(window).height() - (mousey + tipHeight);
           
        if ( tipVisX < 20 ) { //X座標を超えた場合は幅を調節
            mousex = e.pageX - tipWidth - 20;
          
        } if ( tipVisY < 20 ) { //Y座標を超えた場合は高さを調節
            mousey = e.pageY - tipHeight - 20;
        } 
        tip.css({  top: mousey, left: mousex });*/
    });
});

イメージ

完成形での表示を左側に示しました。参考までに「align="left"」がない場合を右側に表示しました。

緑色の下線がある文字がショートコード内のパラメータ「%%title%%」です。画像のディレクトリが同「%%pic%%」、黄色の説明文が同「%%text%%」となっています。

説明文を格納するショートコード名は「%%title%%」と同じにする必要があります。下記の例のショートコード内にはHTMLの改行タグ（＜br＞）も入っています。参照タグ＜a href="～"＞も表示できました（クリックはできませんが）。

以下は「Shortcoder」を利用してエディタにショートコードを挿入する時の画面です。「％％パラメータ名％％」がそれぞれテキストボックスとなって表示されますので、適宜入力します。

最後に

このようにカスタマイズすることによって、1箇所を編集すれば全てに反映できるツールチップができました。

どなたかの参考になれば幸いです。＜span＞が2つ入っていますが、もしかしたら１つにまとめられるのかとも思いますが、試していません。

また、「＜img＞タグ」における「align="left" ("right")」はHTML5にて廃止とのことです。代替の記述がわかっておりません。CSSでの記述なのでしょうか？機を見て修正します。