title: CSS Tooltip Positioning / Chrome vs IE 11
body: <p>I've added a custom weather web part to my SharePoint page, but I want a hover message that displays additional info.</p>
  
  <p>The pieces I've got worked out look great in Chrome, but not so great in IE 11. I need this to look the same in both - any tips?</p>
  
  <pre><code>    .tooltip {
          display:inline;
          position: relative;
          font-family:Arial,Helvetica,sans-serif;
          font-size:9pt;
      }
      .tooltip:hover:after {
          background: #333;
          background: rgba(0,0,0,.8);
          border-radius: 5px;
          top: 6px;
          color: #fff;
          content: attr(title);
          left: 5px;
          padding: 5px 15px;
          position: absolute;
          z-index: 98;
          width: 220px;
          /*width: auto;*/
      }
      .tooltip:hover:before {
          border: solid;
          border-color: #333 transparent;
          border-width: 0 6px 6px 6px;
          top: 40px;
          content: "";
          left: 25px;
          position: absolute;
          z-index: 99;
      }
  </code></pre>
  
  <p>Here's my JSFiddle: <a href="http://jsfiddle.net/hcoa82wb/" rel="nofollow">http://jsfiddle.net/hcoa82wb/</a></p>