MDLツールチップがノックアウトでワードラップしない

Question

データが長すぎる可能性があるテーブルを作成していますので、長すぎる場合はテキストを切り捨てて残りの部分を表示するようにMaterial Design Liteのツールチップを追加しましたユーザーがその上にカーソルを置いたときのデータ

ただし、ツールチップが表示されているときにすべてのデータが表示されていると、ワープロが機能しないため、長い文字列は切り取られます。これは、KnockoutJSを使用してツールチップにテキストを入力する場合にのみ発生します。スクリーンショットでは、ツールチップの右側にパディングが少ないように見えることに注意してください。それは私が持っている問題のためです。そのテキストは、はるかに長く、ワープロする必要があります。

screenshot

<td class="mdl-data-table__cell--non-numeric"> 
    <div data-bind="text: ServiceTag, attr: { id: 'ServiceTag' + $index() }"></div> 
    <div class="mdl-tooltip" data-bind="text: ServiceTag, attr: { for: 'ServiceTag' + $index() }"></div> 
</td> 

.mdl-tooltip { 
-webkit-transform: scale(0); 
     transform: scale(0); 
-webkit-transform-origin: top center; 
     transform-origin: top center; 
will-change: transform; 
z-index: 999; 
background: rgba(97,97,97, 0.9); 
border-radius: 2px; 
color: rgb(255,255,255); 
display: inline-block; 
font-size: 10px; 
font-weight: 500; 
line-height: 14px; 
max-width: 170px; 
position: fixed; 
top: -500px; 
left: -500px; 
padding: 8px; 
text-align: center; } 

Answer 1

クイックフィックスは、マニュアルの行を追加することですが、あなたのServiceTag文字列...最適ではないで< BR/>秒を破るが、それは私のために働きました。

mdl-tooltipクラス（空白：正常）の空白属性を追加することもできます。