Semantic UIでツールチップのテキストにHTMLなどのMarkupを入れる方法
今回はSemantic UIを使っていてツールチップのテキストにHTMLなどのMarkupを入れる方法について調べてみました。
タイトルの通り、CSSの標準が変わらない限りはツールチップのテキストにHTMLなどのMarkupを入れることはできないと思っております。
先にお伝えいたしますが、ツールチップを使わずにSemantic UIに用意されたPopupを使う方法なら見た目上ツールチップ（のようなポップアップ）のテキストにHTMLなどのMarkupを入れることが可能です。
Semantic UIでツールチップのテキストにHTMLなどのMarkupを入れる方法
Semantic UIを使っていて、tooltipのテキストの一部の色を変えたく、HTMLを埋め込む方法を調べていました。
するとこちらのGitHubのissueを見つけました。
https://github.com/Semantic-Org/Semantic-UI/issues/4542
要約すると、
「ツールチップは「:before」と「:after」の擬似クラスを使っていて、HTMLと一緒に生成できないから、CSSの標準が変わらない限りは無理だよね」
と言っています。
ただし、上記のissueの会話で、ツールチップのテキストに改行は入れれないと書いてありましたが、いろいろ試した結果、HTMLは入れれませんでしたが改行は入れる方法はありました。
下記に記載しております。
Semantic UIでツールチップのテキストに改行を入れる方法
いずれツールチップのテキストにもHTMLを埋め込めると良いですね。
もしHTMLなどのMarkupをどうしても入れたいのなら、ツールチップを使わずにポップアップを使う方法を検討してみましょう。
終わりに
今回はSemantic UIを使っていてツールチップのテキストにHTMLなどのMarkupを入れる方法について調べた結果をまとめました。
なお、Semantic UIは長年整備されておらず、2022年現在はSemantic UIからforkされたFomantic-UIのみ整備されております。
現在Semantic UIを利用している方は、Fomantic-UIを使うことを検討してみてください。