Semantic UIでツールチップのテキストに改行を入れる方法

2022年8月18日

今回はSemantic UIでツールチップを使っているときにツールチップのテキストに改行を入れる方法についてご紹介いたします。



Semantic UIでツールチップのテキストに改行を入れる方法

結論のソースコードを書きます。

HTMLとCSSどちらも改修が必要で、HTMLには例として次のようなコードを入れましょう。

一方でCSSには次のコードを書きます。

CSSに加えたwhite-space: pre;とHTMLのdata-tooltipに入れた

を組み合わせることで改行を表します。

終わりに

今回はSemantic UIでツールチップを使っているときにツールチップのテキストに改行を入れる方法についてご紹介いたしました。

なお、Semantic UIは長年整備されておらず、2022年現在はSemantic UIからforkされたFomantic-UIのみ整備されております。
現在Semantic UIを利用している方は、Fomantic-UIを使うことを検討してみてください。

最後までお読みいただきありがとうございます。
ブログやTwitterでのシェアOKです。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。

Youtubeチャンネル開設いたしました。
よろしければチャンネル登録お願いいたします。
https://www.youtube.com/channel/UC219XhmSRxmXltTy6COxSMw