Question

I am trying to figure this for a while but with no success. I have an anchor tag with nested spans to generate a tool_tip. This tool_tip is placed in a th tag. The problem is white-space property gets inherited in the spans. So the text goes outside the spans. The white-space:normal !important does not override white-space:nowrap

table.fieldList th
{
   color: #000; 
   height: 15px; 
   padding-left: 5px; 
   vertical-align: bottom;
   border-bottom: 1px solid #1133AA;
   text-align: left;
   font-weight: bold;
   white-space:nowrap;
}

a.tool_tip
{
   text-decoration:none;
   cursor:pointer;
}

a.tool_tip  span
{
   display: none;
}

a.tool_tip :hover span 
{
   position: absolute;
   height: 30px;
   text-align:left;
   width: 200px;
   font-style: normal;
   margin-left: 0px;
   padding: 0px;
   padding-left: 3px;
   display: inline;
   white-space: normal!important;
   z-index: 12;
   margin-top:20px;
}

a.tool_tip :hover span span
{
   background: white;
   border: solid 1px #004b8d;
   border-right-width: 3px;
   width: 200px;
   margin: 0px;
   padding: 2px;
   height: auto;
   display: block;
   white-space: normal!important;
   z-index: 13;
   font-weight: normal!important;
   text-decoration:none;
}

Answer 1

Tried to reproduce, but it’s wrapped normally for me: http://jsfiddle.net/bATXN/

P.S. Snippet in the question have space before the :hover (“a.tool_tip :hover”) . I have to remove it to make code work. Maybe this is the cause of the problem.