title: How to change tooltip background color?
body: <p>I have created a tooltip in my html file like this:</p>
  
  <pre><code>&lt;span title="" class="duedate-warning-msg"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>And I set the CSS property like this:</p>
  
  <pre><code>.duedate-warning-msg{
       background: url("/static/img/error.png") no-repeat scroll 14px 12px white;
      border-color: #f5c7c7;
      padding: .5em 0.25em 0.5em 2.5em;
      title:"my tooltip";
      color: #D11006;
  }
  
  span:hover{
      position:relative;
  }
  
  span[title]:hover:after {
      content: "This statement is past due.";
      padding: 4px 8px;
      color: white;
      font-size:16px;
      font-family: "open_sansregular";
      background: #0679ca;
      position: absolute;
      left: 0;
      top: 100%;
      white-space: nowrap;
      z-index: 20px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      -moz-box-shadow: 0px 0px 4px #222;
      -webkit-box-shadow: 0px 0px 4px #222;
      box-shadow: 0px 0px 4px #222;
      background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
      background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
      background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
      background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
      background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
      background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
  }
  </code></pre>
  
  <p>The above style created tooltip perfectly. Only problem which I am facing is that I want background color of tooltip is blue. But it always shows gray. Why it is happening so?</p>