Html 鼠标悬停在上方时弹出的窗口不显示（工具提示）

我将包括我的脚本下面，我有一个问题，我的弹出窗口不显示。我在网上进行了研究，不确定我的代码哪里出错了。我试图在所有地方都包含一个弹出窗口，上面写着数据工具提示

下面是工具提示的代码

[数据工具提示]，
[数据工具提示uc]，
[数据工具提示ul]，
[数据工具提示ur]，
[数据工具提示lc]，
[数据工具提示ll]，
[数据工具提示lr]{
位置：相对位置；
z指数：2；
光标：指针；
}
[数据工具提示]：之前{
底部：110%；
内容：attr（数据工具提示）；
}
[数据工具提示]：在，
[数据工具提示]：在，
[数据工具提示ul]：之前，
[数据工具提示ur]：之前，
[数据工具提示lc]：在，
[数据工具提示ll]：在，
[数据工具提示lr]：之前{
可见性：隐藏；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=0）”；
过滤器：progid:DXImageTransform.Microsoft.Alpha（不透明度=0）；
不透明度：0；
指针事件：无；
位置：绝对位置；
左：50%；
边缘底部：5px；
左边距：-80px；
填充：7px；
宽度：160px；
-webkit边界半径：3px；
-moz边界半径：3px；
边界半径：3px；
背景色：#000；
背景色：hsla（0,0%，20%，0.9）；
颜色：#fff；
内容：attr（数据工具提示）；
文本对齐：居中；
字体大小：14px；
线高：1.2；
空白：正常；
}
[数据工具提示]：在，
[数据工具提示]：在{
底部：100%；
}
[数据工具提示]：在，
[数据工具提示uc]：在，
[数据工具提示ul]：之后，
[数据工具提示ur]：在，
[数据工具提示lc]：在，
[数据工具提示ll]：在，
[数据工具提示lr]：在{
可见性：隐藏；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=0）”；
过滤器：progid:DXImageTransform.Microsoft.Alpha（不透明度=0）；
不透明度：0；
指针事件：无；
位置：绝对位置；
左：50%；
左边距：0px；
宽度：0px；
边框顶部：8px纯黑；
边框顶部：10px固体hsla（0,0%，20%，0.9）；
右边框：8px实心透明；
左边框：8px实心透明；
边框底部：透明；
内容：“；
字号：0；
线高：0；
}

与一年中某一天的历史流量相比，实时流量的百分比

（选择一个地区，然后单击“转到”以查看地区地图）
（警告：处理可能需要几分钟）
埃塔茨大学：
埃塔茨
阿拉巴马州
阿拉斯加州
亚利桑那州
阿肯色州
加利福尼亚
科罗拉多州
康涅狄格州
特拉华州
科伦比区
弗洛里德
戈尔吉
哈瓦伊
爱达荷州
伊利诺伊州
印第安纳州
爱荷华州
堪萨斯州
肯塔基州
路易斯安娜
缅因州
马里兰
马萨诸塞州
密歇根
明尼苏达州
密西西比
密苏里州
蒙大拿
内布拉斯加州
内华达州
新罕布什尔州
新泽西州
新墨西哥
纽约莱塔酒店
卡罗琳·杜诺德
北达科他州
俄亥俄州
奥克拉荷马
俄勒冈
宾夕法尼亚州
罗德岛
南卡罗琳酒店
南达科他州
田纳西州
得克萨斯州
犹他州
佛蒙特州
维吉尼
华盛顿酒店
西方弗吉尼亚酒店
威斯康星州
怀俄明州
波多黎各
Région hydrologique
01新英格兰
02大西洋沿岸
03南大西洋湾
04格兰德拉克斯酒店
05俄亥俄州
06田纳西州
07上密西西比州
08密西西比州Inférieur
09红色苏里斯布鲁伊酒店
10密苏里州
11阿肯色州白胭脂
12德克萨斯湾
13格兰德河
14上科罗拉多州
15科罗拉多Inférieur
16大巴辛酒店
西北太平洋17号
18加利福尼亚州
19阿拉斯加
20哈瓦伊
21波多黎各
泰莱·查格勒·多涅斯酒店
加拿大：
省
阿尔伯塔省
哥伦比亚不列颠
马尼托巴省
新不伦瑞克省
新地球和拉布拉多
新埃科斯
西北地区
努纳武特
安大略
Île du Prince-Édouard
魁北克省
萨斯喀彻温省
育空地区
加拿大河鲈
01次
02圣洛朗酒店
03北魁北克和拉布拉多
04哈得逊南部
05弗莱夫·纳尔逊
06哈得逊西北部
07大爱斯克利夫酒店
08太平洋
09弗莱夫育空
10牛蒡
11弗劳韦密西西比
这是因为你用

visibility: hidden;
opacity: 0;

然后永远不要把它藏起来

您需要使用伪类来显示工具提示

[data-whatever]:hover:before,
[data-whatever]:hover:after {
  visibility: visible;
  opacity: 1;
}

显然，用实际的选择器替换“whatever”

您可以看到一个功能示例