table单元格里这种提示效果用什么实现的

Question

想问下table单元格内这种如图这种效果是怎么实现的，（这种是类似悬浮的效果还是水印的效果）

Answer 1

简单写了一点:
html:

<table border=1>
    <tr>
        <td>hello</td>
        <td class="tip warn">
              正常            <span class="undiscuss">待处理</span>
        </td>
    </tr>
    <tr>
        <td>world</td>
        <td class="tip normal">
            异常            <span class="discuss">已处理</span>
        </td>
    </tr></table>

css:

td{padding: 20px 60px}.tip{position:relative}.warn{color: red;}.normal{color: green}.undiscuss{position: 
absolute;right:0;top:0;padding:3px 5px;border:1px solid green;color:green
}.discuss{position: absolute;right:0;top:0;padding:3px 5px;border:1px solid orange;color:orange
}

效果: