HTML & CSS

最終更新日:
公開日:

レシピ

設定

ツールチップの表示を設定する

マウスカーソルを一定時間乗せていると表示されるツールチップについて、表示するメッセージを設定する方法を解説します。

この記事のポイント

  • ツールチップに表示するメッセージを設定する

目次

ツールチップとは?

ツールチップとは、ある要素の上に一定時間マウスカーソルを乗せているとポップアップ表示されるメッセージです。

ツールチップの表示例

ここで表示するメッセージはtitle属性に指定することで任意に設定可能です。
title属性はグローバル属性の1つなので、基本的にはどのHTML要素にも指定することができます。

マークアップ例

上記の表示例のソースコードは次のようになります。

マークアップ例

<h1>要素一覧</h1>
<ul>
	<li><a href="#" title="paragraph">p要素</a></li>
	<li><a href="#" title="insert">ins要素</a></li>
	<li><a href="#" title="delete">del要素</a></li>
</ul>

通常の見出しやテキストなどはマウスカーソルが乗る機会があまり無いので、リンクやボタン、画像などに設定することが一般的な使い方です。
また、iPhoneなどのスマホやタブレットでは、そもそもマウスカーソルが無いので表示されません。