tooltip显示多条数据
时间: 2023-09-23 10:12:17 浏览: 41
要显示多条数据的tooltip,您可以使用HTML和CSS来实现。以下是一个示例:
HTML部分:
```html
<div class="tooltip">
Hover over me
<span class="tooltiptext">
<ul>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
</ul>
</span>
</div>
```
CSS部分:
```css
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
```
在上面的示例中,我们使用了一个`div`元素作为tooltip的容器,其中包含要显示的数据。当鼠标悬停在tooltip容器上时,使用CSS中的`visibility`属性来控制tooltip的显示和隐藏。
请注意,此示例仅显示了静态的数据列表,如果您需要动态加载数据或与后端交互,请使用适当的JavaScript代码来实现。