HTMLのツールチップ（title属性）で改行させる方法を解説！

まずHTMLのツールチップ(title属性)になじみがない人のために簡単ではありますが、解説します。

title属性は、マウスホバーした際にポップアップで設定したテキストを表示してくれる属性でです。

それでは実際にサンプルコードを用いて挙動を見てみましょう。

このように「タイトル」にホバーすると「これはタイトルです。」とポップアップが表示されることが分かります。

これがtitle属性の役割です。更にtitle属性を掘り下げて詳細を知りたい方は下記を参考にしてみて下さい。

今回はこのtitle属性で改行させる方法について解説します。

それではHTMLのツールチップ（title属性）で改行させる方法について解説します。
まず普通にtitle属性の中で改行して書いてみましょう。

実際にサンプルコードを用いて挙動を見てみましょう。
 

このようにブラウザ上でも改行されていることが分かります。しかしこれではtitleが長くなり、いくつも改行部分があると、とても見にくいコードになってしまいます。

そこで今回はHTMLとJavaScriptで任意の場所で改行する方法について2パターン紹介します。

HTMLのみの場合、改行を表す特殊文字である
を用います。

改行したい場所に
を挿入するだけで改行することが出来ます。

それでは実際にサンプルコードを用いて挙動を見てみましょう。

このようにtitle属性が付与されている「これはタイトルです。」が改行されていることが分かります。

では次にJavaScriptを用いた場合について解説します。

まずtitle属性を付与したい要素にidかclass属性を追加します。そしてその要素をJavaScriptのgetElementByIdかquerySelectorなどを用いて読み取ります。

次に読み取った要素にtitle属性を付与するために.titleをつけ、title属性に挿入する文章を書きます。そして改行したい場所には\nをつけます。

以上がJavaScriptを用いて改行させる方法です。

では実際にサンプルコードを用いて挙動を見てみましょう。

このようにtitle属性の文章が改行されていることが分かります。

いかがでしたでしょうか？

title属性は要素のヒントとなるテキストを指定し、用いることでユーザーフレンドリーになります。

しかし、title属性に書く文章が長すぎたり、多用しすぎると見にくくなるというデメリットもあります。

その辺りは適宜調整してぜひ使ってみてください。