テーブルのポップアップを角2で表示する

Question

私はテーブルにデータを持っています。各データセットには、値を送信するためにクリックできるボタンがあります。私はボタンをクリックすると、あなたがここに来ることができますように、私は、小さなポップアップ表示自体を持つようにしたい：

https://www.w3schools.com/howto/howto_js_popup.asp

私はこれを試してみました、だけでなく、テーブルの周りのdivを移動：

<tr> 
    <td> 
     <div class="message" [hidden]="booleanValue">Message</div> 
    </td> 
</tr> 

メッセージを正しく表示するために私のボタンをクリックしましたが、divにはありませんでした。つまり、テーブルに行が追加されていました。これは私が探していたものではありませんでした。ここで

は、クラスメッセージのCSSです：

.message { 
    display: inline-block; 
    width: 160px; 
    background-color: #555; 
    color: #fff; 
    text-align: center; 
    border-radius: 6px; 
    padding: 8px 0; 
    position: absolute; 
    z-index: 1; 
    bottom: 125%; 
    left: 50%; 
    margin-left: -80px; 
} 

Answer 1

私は角に上記の例を適応しました。

Plunker

HTML

<td class="popup" (click)="setShow(5)">Click me to toggle the popup! 
    <span [class.show]="pop===5" class="popuptext">A Simple Popup!</span> 
</td>