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

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



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

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

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

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

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

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

終わりに

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

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






Semantic UI

Posted by ちこ