HTMLでツールチップを表示する要素を作成する

HTMLで作成した要素内で、専門用語や略語などを使用して文章を組み立てるとき、ヒントや助言などを書いて分かりやすい文章構成にすることがあります。

しかし作成した要素にヒントや助言を表示するスペースが確保できない場合があります。そんなときにはHTMLでツールチップを表示する要素を作成するという実装の選択肢があります。

1. ツールチップをHTMLのtitle属性で表示
2. HTMLでツールチップを略語要素に表示する
3. カスタムデータ属性でツールチップの要素を作成
4. アイコンでツールチップを表示する要素の作成
5. ツールチップをスマホのタップに対応させる

ツールチップをHTMLのtitle属性で表示

HTMLでツールチップを表示する場合には、HTMLのa要素やdiv要素などを作成するときに「title属性」を使用すると、ツールチップを簡単に表示することができます。

下記のHTML記述は、a開始タグにtitle属性を使用して、ツールチップが表示するアンカー要素を作成した例です。

<a href="#" title="別タブで開きます" target="_blank">リンクにツールチップ</a>

title属性でツールチップを表示するには、title属性の値にツールチップで表示したい内容を文字列で記述します。

ツールチップで表示する文字列を、たとえば「別タブで開きます」とtitle属性の値に記述した場合。

リンクにツールチップ

記述した表示結果は上の黒背景内です。「リンクにツールチップ」のリンクテキストにマウスを乗せると、title属性の値に記述した文字列がツールチップの内容として表示します。

スマホなどのタッチ操作を必要とする端末ではツールチップが表示されないので画像にした表示結果も以下に載せておきました。

HTMLでツールチップを表示するための要素を作成するときに使用できるtitle属性はグローバル属性の1つです。そのため、画像を表示するimgタグやボタンにするbutton要素など、どのHTML要素にも記述することができます。

HTMLでツールチップを表示する要素の作成でtitle属性を使用するパターンとして、親要素にtitle属性を使用した場合には、子要素に親要素のtitle属性の値がツールチップとして表示します。

例えば親要素をdivタグで作成、子要素はpタグでマークアップした文章を表示したとします。

<div title="親要素のツールチップ">
    <p>HTMLとCSSを独学しています。独学をはじめたキッカケは、自分がイメージするデザインでWebサイトを作ってみたいという好奇心からです。</p>
</div>

このときに、親要素のdiv開始タグにtitle属性を使用して値には文字列を記述します。上の記述例では「親要素のツールチップ」が値です。

HTMLファイルをブラウザに表示させて、title属性を使用してない子要素pの文章にマウスを乗せると、親要素に記述したtitle属性の値がツールチップの内容として子要素にも表示できます。

そしてtitle属性で表示したツールチップ内の改行です。文字列しか使えないということなので調べて試してみました。

title属性の値の文字列をHTMLファイルでそのまま改行するだけでした。以下の記述例のようにすると改行できます。

<p><span title="HyperText
       Markup
             Language">HTML</span>とCSSを独学しています。独学をはじめたキッカケは、自分がイメージするデザインでWebサイトを作ってみたいという好奇心からです。</p>

HTMLでツールチップを略語要素に表示する

Webサイトで文章内の単語を略語にして表示している場合、略語に対しての正式名をツールチップで表示しているWebサイトがあったりもします。

前述したtitle属性を使用したツールチップで略語に対しての正式名を表示することができますが、このとき<abbr>タグで略語要素を作成して、略語の完全な正式名はツールチップで表示するという組み合わせの要素をHTMLでは作成することができます。

abbrタグはHTML5で追加されたタグで「略語」や「頭字語」を示すタグです。読み上げソフトにも対応しているようです。

HTMLの<abbr>とtitle属性の記述例は以下です。

<div>
    <p><abbr title="HyperText Markup Language">HTML</abbr>と<abbr title="Cascading Style Sheets">CSS</abbr>を独学しています。独学をはじめたキッカケは、自分がイメージするデザインでWebサイトを作ってみたいという好奇心からです。</p>
</div>

まず、abbrタグで略語をマークアップします。これによりHTMLの<abbr>が略語要素として、略語や頭字語を示してくれます。

次に<abbr>開始タグにtitle属性を記述します。title属性値には、略語に対しての完全な正式名を記述します。たとえば「HTML」の頭字語なら「HyperText Markup Language」と完全な正式名がツールチップに表示できるようにします。

title属性を使用したツールチップ自体の表示結果はブラウザごとに若干異なる表示をしますが、<abbr>と組み合わせたことで、Chrome、Firefox、Microsoft Edgeあたりのブラウザではツールチップを表示した略語の下部に点線が表示できます。

カスタムデータ属性でツールチップの要素を作成

HTMLでツールチップを表示するための要素作成は「カスタムデータ属性」を使用することでも可能です。

カスタムデータ属性とは、要素にオリジナルの属性を付与することができる属性です。HTML5からの仕様です。

<p data-任意名="文字列">text</p>

HTMLでカスタムデータ属性を使う場合にはHTMLの開始タグに「data-任意名=”文字列”」という書き方をして属性を付与します。属性名は先頭にdata-がついていれば自由に記述できます。

例えば

<p data-tkg=”卵かけご飯”>TKG</p>

のように使用することでdata-tkgに格納された値「卵かけご飯」の文字列をJavaScript、jquery、cssで取り出せます。データ属性に格納するデータは文字列です。

上記の基本を踏まえて、カスタムデータ属性でツールチップの要素を作成します。記述例として、HTMLのpタグでマークアップした文章内で、略語「HTML」に対してカスタムデータ属性を使用したツールチップの要素を作成します。

<p class="text-smple"><abbr class="hint-chip" data-tooltip="HyperText Markup Language">HTML</abbr>と<abbr title="Cascading Style Sheets">CSS</abbr>は独学です。</p>

HTMLの語句にabbrタグをマークアップして略語要素を作成し、abbr開始タグにカスタムデータ属性をdata-tooltipと記述します。

カスタムデータ属性のdata-tooltipの値には、ツールチップで表示する文字列を記述します。記述例では「HyperText Markup Language」です。

次にカスタムデータ属性の値に格納した文字列をCSSで呼び出しツールチップを表示します。ツールチップのデザインも含めたCSSの記述が下記です。

.text-smple{
    text-align: center;
    background: #2e2e2e;
    padding: 20px;
    font-weight: bold;
    letter-spacing: 0.05em;
    color: darkgray;
}

.hint-chip {
    position: relative;
}

.hint-chip::after {
    content: attr(data-tooltip);
    position: absolute;
    left:0;
    display: block;
    padding: 10px;
    background: #cddc39;
    color: #333;
    transition: all 0.3s ease 0s;
    opacity: 0;
    font-size: 0.6em;
}

.hint-chip:hover::after{
    top: 30px;
    opacity: 1;
    font-weight:bold;
}

.hint-chip::afterのセレクタに記述しているcontent: attr(data-tooltip);の記述が、HTMLで記述したカスタムデータ属性の値を呼び出しています。

CSSで呼び出したカスタムデータ属性値は、HTMLの語句にマウスが乗ったときにツールチップを表示するという出し方をしたいので、セレクタ.hint-chip::afterをホバーさせます。

ホバー前はopacity: 0;でツールチップが表示されないように、ホバー時はopacity: 1;でツールチップを表示。常に表示するならホバー前のopacityの値を「1」にしてしまってもいいかと思います。

ツールチップの表示位置については、ツールチップが使われる語句のHTMLをマークアップしたabbr要素を基準位置にして、ツールチップを表示する疑似要素の位置を調整します。

See the Pen
tool-chip-test by @shu (@shua01cdfbae5)
on CodePen.

ツールチップをデザインした表示結果は上のCodePenで、単語のHTMLにマウスを乗せると、ホバーしたツールチップを表示して確認できます。CSSの単語はHTMLのtitle属性でツールチップが表示します。

このようにカスタムデータ属性でツールチップの要素を作成すると、ツールチップの位置や色、フォントなどをCSSでデザインすることができます。

デザイン面において検証ツールでホバー状態を固定すれば検証もできるので、ツールチップの実装前と実装後にも役立ちます。

ツールチップの表示は吹き出しにしたデザインにしてもいい感じのツールチップにできますね。

アイコンでツールチップを表示する要素の作成

HTMLでツールチップを表示するときに、アイコンでツールチップを表示する要素を作成することがあるかもしれません。

文章での単語の意味を軽く助言してみるとか、テーブル内でのセルに簡潔なアドバイスを加えてみる、とかでしょうかね。このときスペースを確保できる要素ならツールチップなしで良いのですが、要素に確保するスペースがない場合には、アイコンでツールチップを表示する要素の作成も視野にいれる事ができます。

アイコンでツールチップを表示する要素を以下のHTML記述のようにして作成してみました。

<p><span class="icon-position">ツールチップ<i class="far fa-question-circle hint-icon" title="用語に対してのアドバイスやヒントがニュルッと表示するやつ"></i></sapn>を表示する要素を作成</p>

Font Awesomeのアイコンを表示するタグにtitle属性を記述することで、アイコンにマウスが乗ったときにtitle属性値の文字列がツールチップとして表示できるように作成した要素です。

ツールチップが表示するアイコンは、はてなアイコンです。

アイコンでツールチップを表示する要素にあてたスタイルは以下のCSSです。

.icon-position{
    position: relative;
    background-color: aliceblue;
    text-align: center;
}
.hint-icon{
    position: absolute;
    top: -15px;
    left: 80px;
    font-size: 1rem;
}