【Hugo】ブログにマウスオーバーでふわっと表示する吹き出しを追加

2020-03-262020-05-23

サイト構築

Hugo

HTML

このブログでは、プログラミングの用語など、少し専門的な言葉が出てくることがよくあります。

そのときに、いちいち言葉の意味を解説すると、

書き手としても、その分野の用語をよく知っている読み手としても、くどくなってしまいます。

かといって解説を書かないのも初学者に不親切です。

そのため、その言葉の意味を知らない人はマウスオーバー（スマホやタブレットならタップ）で

言葉の簡単な説明が見られるようにしています。

これはツールチップというそうです。

今回は、

がどのように実装できるかお話していきます。

コーディング

こちらを参考にさせていただきました。

→ マウスオーバーで吹き出し表示

HTML

文中にも書くため、<span>タグを使っています。

1<span class="tooltip" ontouchstart="">
2    <span class="tooltip-base">（もとの文字列）</span>
3    <span class="fukidashi">（吹き出しに表示される文字列）</span>
4</span>

ontouchstart というのは、スマホなどのタッチデバイスで指が触れたときに発生するイベントです。

念のためつけています。

CSS

SCSS で書いています。

1.tooltip {
2    position: relative;
3    cursor: help;       // マウスカーソルを変更
4    color: #f48b7b;     // 文字色
5    a {
6        color: #f48b7b;
7    }
8}
9　
10.fukidashi {
11    transition: .5s;    // アニメーション秒数
12    z-index: -1;        // 他と重なったときの上からの順番
13    opacity: 0;         // 不透明度
14    min-width: 10em;    // 最小の幅
15　
16    // 位置調整
17    position: absolute;
18    left: -1em;
19    bottom: 100%;
20    padding: 0.5em;
21    margin-bottom: 1em;
22　
23    font-size: 0.6em;       // フォントサイズ
24    border-radius: 0.6em;   // 角を丸く
25    background: #fff0f0;    // 背景色
26　
27    &::after {
28        content: "";    // 内容
29　
30        // 位置調整
31        position: absolute;
32        left: 25%;
33        bottom: -1em;
34　
35        // 三角形の描画
36        border-top: solid 1em #fff0f0;
37        border-left: solid 0.5em transparent;
38        border-right: solid 0.5em transparent;
39    }
40}
41　
42.tooltip:hover .fukidashi {
43    z-index: 0;     // 他と重なったときの上からの順番
44    opacity: .96;   // 不透明度
45}

修飾が多いですが、最低限必要となるのは黄色でマークした部分だけです。

after疑似要素によって、fukudashiの要素直後に三角形を描いています。

最初は CSS で三角形だなんて何事だと思いました笑が、

こちらのサイトを読んでいたらなんとなくわかりました。

→ CSSだけで三角形を作ろう！その1：borderプロパティの仕組みをマスター | 株式会社グランフェアズ

ちなみにこの状態では表示された吹き出しにマウスポインタを移動させても表示され続けますが、

42行目を.tooltip-base:hover + .fukidashiとすれば、

文字からマウスポインタを離すと吹き出しは消えてしまいます。

.tooltip-base:hover + .fukidashiは.tooltip-baseにマウスオーバーしたときに.fukudashiに適用されるスタイルを指定します。

関連記事【Hugo】ブログにサイドバーを追加/レスポンシブデザイン

Hugo ショートコードとあわせて

記事内で多用するので、ショートコードを作りました。

ショートコードを使うには、/layouts以下にshortcodesフォルダを作り、

ショートコード名と同名のファイルを作成します。

/layouts/shortcodes/tooltip.html1{{- $inner := .Inner -}}
2{{- $split := split $inner `((` -}}
3{{- $tooltip_base := index $split 0 -}}
4{{- $fukidashi := index $split 1 -}}
5　
6<span class="tooltip" ontouchstart="">
7    <span class="tooltip-base">{{ $tooltip_base | markdownify }}</span>
8    <span class="fukidashi">{{ $fukidashi | markdownify }}</span>
9</span>

.Innerには

{{< shortcode_name >}}{{< /shortcode_name >}}

で挟まれた部分が渡されます。

例えば{{< tooltip >}}やっほー((**太字**だよ{{< /tooltip >}}と書けば、

.Innerにやっほー((**太字**だよが変数$innerに渡されます。

splitは指定した分割記号で文字列を分離したリスト（スライス）を返します。

((の前の内容が$tooltip_baseに、後の内容が$fukidashiに渡されます。

例えばやっほー((**太字**だよはやっほーと**太字**だよに分けられ、

後者は最終的には<strong>太字</strong>だよとなります。

markdownifyはマークダウンとして処理をするということです。

今回は((で前後を分けていますが、より複雑な分け方をしたい場合は正規表現を使うとよいでしょう。

tooltip.html1...
2{{- $pattern := `^(.+)\\(\\((.+)$` -}}
3{{- $tooltip_base := replaceRE $pattern `$1` $inner -}}
4{{- $fukidashi := replaceRE $pattern `$2` $inner -}}
5...

ところで、ここでは{{}}の中の-は必須です。

これがないとこの行が空行とみなされてしまいます。

ここはマークダウンファイルの中なので、その空行を見つけてマークダウン処理がなされ、

表示がおかしくなってしまいます。

関連記事【Hugo】ショートコードで複雑な HTML を簡潔に

吹き出しは難しそうに見えますが、表示させるだけなら比較的簡単に実装できます。

お役に立てたらうれしいです。

それでは