html - 将 HTML 表格放在图标内的工具提示中
问题描述
我一直在尝试将表格放在图标内的工具提示中,主要目标是创建一个小图例,使用黄色/橙色图标来解释这些颜色的含义。
到目前为止,我只设法使图标出现,但没有进一步成功。我现在在“颜色”列中制作的表格只显示颜色的名称,但我想显示一个小方块,用代表颜色的颜色绘制,即红色方块代表红色,蓝色蓝色的正方形......等等。
这是我制作的代码:
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 180px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<a>
<span class="tooltip">
<i class="fas fa-info-circle"></i>
<table class="tooltiptext">
<thead>
<tr>
<th>Color</th>
<th>Significado</th>
<tr>
</thead>
<tbody>
<tr>
<th>Gris</th>
<th>Comprado</th>
</tr>
<tr>
<th>Verde</th>
<th>Emergencia</th>
</tr>
<tr>
<th>Verde</th>
<th>Urgencia</th>
</tr>
<tr>
<th>Verde</th>
<th>Urgencia Menor</th>
</tr>
<tr>
<th>Verde</th>
<th>Sin Urgencia</th>
</tr>
</tbody>
</table>
</span>
</a>
编辑:这是其中的一小部分。
解决方案
我可以使用 bootstrap 和 javascript 来做到这一点,我使用 js 是为了避免 Visual Studio 出现小问题,因为编译器不允许我在 bootstrap 工具提示的 title 属性中放置类属性。
这是代码:
<a id="information" data-toggle="tooltip" data-html="true">
<span><i class="fas fa-info-circle" style="color: #ff9900"></i></span>
</a>
function info() {
var infoTooltip = document.getElementById("information");
infoTooltip.setAttribute("title",
`
<table>
<thead>
<tr>
<th>Colores</th>
</tr>
</thead>
<tbody>
<tr>
<th><span class="badge badge-danger px-2">Emergencia</span></th>
</tr>
<tr>
<th><span class="badge badge-warning px-2">Urgencia</span></th>
</tr>
<tr>
<th><span class="badge badge-success px-2">Urgencia Menor</span></th>
</tr>
<tr>
<th><span class="badge badge-primary px-2">Sin Urgencia</span></th>
</tr>
<tr>
<th><span class="badge badge-light px-2">Comprado</span></th>
</tr>
</tbody>
</table>
`
);
}
这就是结局。
推荐阅读
- ios - 我遇到无法在 xcode 上创建配置文件错误
- r - 如何在 ggplot2 中使用 annotation_custom 自定义 x 轴
- go - CORS 请求未应用正确的 Golang
- python - 为什么算法对 C++ 和 Python 给出不同的答案?
- python - 完成 GeneratorDatase 时发生 TensorFlow 错误
- tensorflow - tf__norm() 接受 1 个位置参数,但给出了 2 个
- sql - 使用触发器在该行中只有一个列值更改时更新当前行中的数据
- python - Python_在单行中提示用户多个变量并在新行中调用每个变量
- html - 固定导航栏隐藏在 Chrome 手机上的浏览器地址栏后面
- javascript - 提供“'类型别名'的打字稿编译器只能在 .ts 文件中使用。” 在一个 js 文件中