Home/ Questions/Q 7040071
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T01:52:27+00:00

I have made css to mouse Hover popup displayed. FireFox, Crome looks fine but

  • 0

I have made css to mouse Hover popup displayed.

FireFox, Crome looks fine but IE 8 seems problem
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
FireFox
Crome
Crome
IE8
IE8

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Need Z-index at :hover also

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