在Angular 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>