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