Material UI IconButtonのツールチップテキストに複数の行を設定するにはどうすればよいですか？

Question

マテリアルUIのIconButtonコンポーネントにツールヒント属性を使用したいと考えています。しかし、私のツールチップの値は長い文字列です。ツールチップのポップアップテキストのために、1行ではなく、複数行で読み込むように文字列を設定するにはどうすればよいですか？

const longSentenceForToolTop = "this is a really long tip and I would like to set it to multiple lines so I do not have one really long line as my tip going across my view because that would be obnoxious" 

<IconButton 
    tooltip={longSentenceForToolTop} 
    tooltipPosition="top-center"> 
    <FontIcon 
    className="material-icons"> 
    info_outline 
    </FontIcon> 
</IconButton> 

更新：

私のコードは次のようになります。

const toolTipText = (text) => (
    <div style={{lineHeight: 15px, whiteSpace: pre}}> 
    </div> 
); 

    <IconButton 
     tooltip={tipText(text)} 
     tooltipPosition="top-center"> 
     <FontIcon 
     className="material-icons"> 
     info_outline 
     </FontIcon> 
    </IconButton> 

今テキストは異なる行に分割が、アイコンの上ではなく、それより上に浮いています。アイコンの上にテキストを配置するためにCSSを使用しようとしていますが、私は成功しません。誰かがposition：relative setを持つ要素の位置を操作する方法を知っていますか？

Answer 1

line-breakのような新しいクラスを作成し、white-space: pre-lineというCSSプロパティを追加して、\nが改行として解釈されるようにすることができます。 はここで簡単な例である：あなたの特定のケースで

https://codepen.io/yowakita/pen/VPNxBV

、あなたはIconButtonのスタイルプロパティへwhiteSpaceをインライン化することができます。

const text = 'Hello, this is line one \n and this is line 2'; 
    return 
    <IconButton 
     style={{whiteSpace: 'pre-line'}} 
     tooltip={text} 
     tooltipPosition="top-center"> 
     <FontIcon 
     className="material-icons"> 
     info_outline 
     </FontIcon> 
    </IconButton> 

編集： you-がインラインスタイルでdivに文字列を配置し、その後IconButtonのtooltipプロパティにノードとしてそれをpasssing試すために、これは動作しませんでしたように思えます。それは数字、文字列、要素またはこれらの型を含む配列（またはそのフラグメント）を取り込むことができるように材料-UIでIconButtonためtooltipプロパティは、ノード型であること

const text = <div style={{whiteSpace: 'pre-line'}}>{'Hello, this is line one \n and this is line 2'}</div>; 
    return 
    <IconButton 
     tooltip={text} 
     tooltipPosition="top-center"> 
     <FontIcon 
     className="material-icons"> 
     info_outline 
     </FontIcon> 
    </IconButton> 

注意。

だからではなく、長い文字列を渡すのあなたも、このようなテキストの長い文字列という別れのdivのセットとして、別のコンポーネント/要素に渡すことができます：あなたは任意の要素にあなたを置くことができる

const longSentenceForToolTop = 
    <div> 
    <div>this is a really long tip and I would like to set it</div> 
    <div>to multiple lines so I do not have one really long</div> 
    <div>line as my tip going across my view because that would</div> 
    <div>be obnoxious</div> 
</div> 

Answer 2

tooltipの内側にしたいだけではなく、テキスト：

<IconButton 
    tooltip={<div>First Line<br />Second Line</div>} 
    tooltipPosition="top-center"> 
    <FontIcon 
    className="material-icons"> 
    info_outline 
    </FontIcon> 
</IconButton> 

あなたはtooltipがされると、あなたが改行を強制したいどのくらいわからない場合は、使用することができます（DIVと力ワードラップのwidthを設定テキストを強制的に整列させることもできますあなたの中の左には中央に置かないでください）：