Semantic UIでツールチップのテキストに改行を入れる方法
今回はSemantic UIでツールチップを使っているときにツールチップのテキストに改行を入れる方法についてご紹介いたします。
Semantic UIでツールチップのテキストに改行を入れる方法
結論のソースコードを書きます。
HTMLとCSSどちらも改修が必要で、HTMLには例として次のようなコードを入れましょう。
|
1 2 3 |
<span data-tooltip="test1
test2
test3"> <i class="question circle icon"></i> </span> |
一方でCSSには次のコードを書きます。
|
1 2 3 |
[data-tooltip]::after { white-space: pre; } |
CSSに加えたwhite-space: pre;とHTMLのdata-tooltipに入れた
|
1 |

 |
を組み合わせることで改行を表します。
終わりに
今回はSemantic UIでツールチップを使っているときにツールチップのテキストに改行を入れる方法についてご紹介いたしました。
なお、Semantic UIは長年整備されておらず、2022年現在はSemantic UIからforkされたFomantic-UIのみ整備されております。
現在Semantic UIを利用している方は、Fomantic-UIを使うことを検討してみてください。