我一直在嘗試將表格放在圖標內的工具提示中，主要目標是創建一個小圖例，使用黃色/橙色的圖標解釋這些顏色的含義。到目前為止，我只設法使圖標出現，但沒有取得進一步的成功。我在“顏色”列中制作的表格現在只顯示顏色的名稱，但我想顯示一個用顏色繪制的小方塊，即代表紅色的紅色方塊，藍色的紅色方塊藍色的正方形...等等。這是我編寫的代碼：<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>編輯：這是其中的一個小片段。
1 回答
郎朗坤
TA貢獻1921條經驗 獲得超9個贊
我能夠使用 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>
? ? ? ? `
? ? );
}
這就是結果。
- 1 回答
- 0 關注
- 107 瀏覽
添加回答
舉報
0/150
提交
取消