将 HTML 表放入图标内的工具提示中

Question

我一直在尝试将表格放在图标内的工具提示中，主要目标是创建一个小图例，使用黄色/橙色的图标解释这些颜色的含义。

到目前为止，我只设法使图标出现，但没有取得进一步的成功。我在“颜色”列中制作的表格现在只显示颜色的名称，但我想显示一个用颜色绘制的小方块，即代表红色的红色方块，蓝色的红色方块蓝色的正方形...等等。

这是我编写的代码：

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

编辑：这是其中的一个小片段。

Answer 1

我能够使用 bootstrap 和 javascript 来完成此操作，我使用 js 是为了避免 Visual Studio 出现一些小问题，因为编译器不允许我将 class 属性放入 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>        `    );}这就是结果。