Html IE 8鼠标悬停弹出位置与css

我已经使css鼠标悬停弹出显示

FireFox、Crome看起来不错，但IE 8似乎有问题 CSS

span[数据工具提示]：悬停：在{
内容：attr（数据工具提示）；
填充：4px8px；
颜色：#333；
位置：绝对位置；
左：0；
前50名；
z指数：200；
宽度：100%；
边界半径：5px；
盒影：0px 0px 4px#222；
字体大小：正常；
背景色：#eeeeee；
-moz边界半径：5px；
-moz盒阴影：0px 0px 4px#222；
-ms边界半径：5px；
-ms盒阴影：0px 0px 4px#222；
-网络工具包盒阴影：0px 0px 4px#222；
-webkit边界半径：5px；
}
span[数据工具提示]：悬停{
字体大小：粗体；
位置：相对位置；
}

HTML

AFM风速、AFM压差、风速模块、中央比例混合器、氯、冷冻柜温度、压差、分配泵、门、排水冲洗电磁阀、F。。。

FireFox Crome IE8

---

您拥有

前50名
。尝试
top:50px
您可以在此处查看工作示例：
需要Z索引：同时悬停

span[data-tooltip]:hover:after {
    z-index: 999;
    padding-bottom: 4px;
    content: attr(data-tooltip);
    background-color: #eeeeee;
    padding-left: 10px;
    padding: 4px;
    padding-right: 10px;
    color: #333;
    padding-top: 10px;
    -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0px #727272;
    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0px #727272;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0px #727272;
    -moz-border-radius: 4px;
    border-radius: 5px;
    float: left;
    width:500px; 
    top: 50px;
    left: 50px;
    position: absolute;
    /* display: block;
    overflow: hidden;
    font-weight: normal;
    TEXT-DECORATION: none
    */ 

}

span[data-tooltip]:hover {
    font-weight: normal;
    position: relative;
    z-index: 1; 
}

确保他们的父标签设置为position:relative，同时设置绝对宽度而不是relative（100%），因为ie在绝对位置上不能很好地使用相对宽度，这在IE8中没有什么不同
<span id="OverviewPointTypesSummary" data-tooltip="AFM Air Velocity, AFM Differential Pressure, Air Velocity Module, Central Proportioner, Chlorine, Cryo Freezer Temperature, Differential Pressure, Distribution Pump, Door, Drain Flush Solenoid, Fan, Flow Switch, Freezer Temperature, Generic Humidity, Generic Temperature, Incubator CO2, Incubator Humidity, Incubator O2, Incubator Temperature, Lights, Log Space Available, Machine, Membrane Flush Solenoid, Modem Status, PH, PRS Flow, PRS HP Solenoid, PRS Pressure, Pressure Switch, RO Machine, Rack Solenoid, Refrigerator Temperature, Relay Contact, Room CO2, Room Humidity, Room O2, Room Solenoid, Room Temperature, Storage Tank, Ultra-Low Freezer Temperature, Vent Rack, Waste Flush Solenoid, Water Pressure">AFM Air Velocity, AFM Differential Pressure, Air Velocity Module, Central Proportioner, Chlorine, Cryo Freezer Temperature, Differential Pressure, Distribution Pump, Door, Drain Flush Solenoid, F...</span>

span[data-tooltip]:hover:after {
    z-index: 999;
    padding-bottom: 4px;
    content: attr(data-tooltip);
    background-color: #eeeeee;
    padding-left: 10px;
    padding: 4px;
    padding-right: 10px;
    color: #333;
    padding-top: 10px;
    -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0px #727272;
    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0px #727272;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0px #727272;
    -moz-border-radius: 4px;
    border-radius: 5px;
    float: left;
    width:500px; 
    top: 50px;
    left: 50px;
    position: absolute;
    /* display: block;
    overflow: hidden;
    font-weight: normal;
    TEXT-DECORATION: none
    */ 

}

span[data-tooltip]:hover {
    font-weight: normal;
    position: relative;
    z-index: 1; 
}