IE 8 mouser всплывающее окно с css

Question

Я сделал css для мыши Отображается всплывающее окно при наведении курсора.

FireFox, Crome выглядит хорошо, но IE 8 кажется проблемой CSS

span[data-tooltip]:hover:after {
    content: attr(data-tooltip);
    padding: 4px 8px;
    color: #333;
    position: absolute;
    left: 0;
    top: 50;
    z-index: 200;
    width: 100%;    
    border-radius: 5px;
    box-shadow: 0px 0px 4px #222;
    font-weight: normal;
    background-color: #eeeeee;
    -moz-border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;
    -ms-border-radius: 5px;
    -ms-box-shadow: 0px 0px 4px #222;
    -webkit-box-shadow: 0px 0px 4px #222;
    -webkit-border-radius: 5px;
    <!--    white-space: nowrap; -->
}


span[data-tooltip]:hover {
    font-weight: bold;
    position: relative;
}

HTML

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

FireFox Crome IE8

Answer 1

Вы можете проверить рабочий пример здесь: http://jsfiddle.net/Bejrg/4/

Answer 2

Нужен Z-индекс при: hover также

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; 
}

Answer 3

У вас есть top: 50.Попробуйте top: 50px