HTMLのtitle属性を使って見切れたテキストの全体をツールチップとして表示する

はじめに

個人開発でTabTabTabというタブ管理用のChrome拡張を開発しているが、最近ユーザーから見切れたタブのタイトルの全体を見れるようにして欲しいという要望があった。

自分もその機能は欲しいと思い、以下のようなブラウザでよく見るツールチップを実装することにした。この記事ではその実装方法について残しておく。

対応方法

対応方法自体はかなり簡単で、HTMLのタグ内にtitle属性を追加するだけだった。例えばReactだと以下のようにすれば対応できる。

<p title={title}>{title}<p>

ちなみにこのtitle属性はグローバル属性なため、全てのHTML要素に対して使用することができる。

title - HTML: ハイパーテキストマークアップ言語 | MDN

title グローバル属性は、要素に関するアドバイザリー情報を表すテキストを含みます。

developer.mozilla.org