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

        `

    );

}

这就是结果。