慕碼人2483693
2023-11-13 09:38:45
我有一個帶有固定標題的表格,工具提示在懸停時被相鄰單元格隱藏。https://jsfiddle.net/9uep5na8/table { border-collapse: collapse; width: 100%; position: relative;}td, th { height: 200px; border: 1px solid black;}th { position: sticky; top: 0; background: #eee;}button:hover::after { content: "some tooltip content"; position: absolute; bottom: 50%; left: 250px; background-color: yellow; padding: 10px 8px; min-width: 240px;}
3 回答

DIEA
TA貢獻1820條經驗 獲得超2個贊
我相信唯一的方法是使用 javaScript。
這是我的實現:
CSS:
#tooltip::after {
content: "some tooltip content some tooltip content some tooltip content some tooltip content";
position: absolute;
bottom: 30%;
left: 250px;
background-color: yellow;
padding: 10px 8px;
min-width: 240px;
max-width: 240px;
}
JS:
btn.addEventListener('mouseover', event => {
tooltip.style.display = 'block';
})
btn.addEventListener('mouseout', event => {
tooltip.style.display = 'none';
})
https://jsfiddle.net/1dvc6mbh/

海綿寶寶撒
TA貢獻1809條經驗 獲得超8個贊
<th>
解決方案是為具有工具提示的內容設置更高的 z-index
th.tooltip-header { z-index: 20; }
修改了您的示例: https: //jsfiddle.net/0cwahnby/2/
- 3 回答
- 0 關注
- 177 瀏覽
添加回答
舉報
0/150
提交
取消