js添加提示tooltip时,能否在冒泡内容里加一个表格数据?请向我提供完整代码
时间: 2024-05-06 19:16:03 浏览: 10
当然可以在 tooltip 内添加表格数据,以下是一个示例代码:
HTML 代码:
```html
<button class="tooltip" data-tooltip="这是一个提示框">悬浮查看</button>
```
CSS 代码:
```css
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
cursor: help;
}
.tooltip:hover::before {
content: attr(data-tooltip);
position: absolute;
background-color: #333;
color: #fff;
padding: 0.5em;
border-radius: 5px;
font-size: 0.8em;
white-space: nowrap;
z-index: 9999;
}
.tooltip:hover::after {
content: '';
position: absolute;
border-style: solid;
border-color: #333 transparent transparent transparent;
border-width: 6px;
top: -12px;
left: 50%;
transform: translateX(-50%);
z-index: 9998;
}
```
JS 代码:
```js
const tooltip = document.querySelector('.tooltip');
const table = `
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>22</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>25</td>
</tr>
</tbody>
</table>
`;
tooltip.dataset.tooltip = table + tooltip.dataset.tooltip;
```
在这个示例中,我们通过 JS 代码将表格数据添加到了 tooltip 内。你可以根据需要修改表格的内容和样式。