CSS工具提示定位/ Chrome浏览器与IE 11

Question

我已经添加了一个自定义天气Web部件到我的SharePoint页面，但是我想要一个悬停消息来显示其他信息。

我在Chrome中制作的这些作品看起来很棒，但在IE 11中并没有那么棒。我需要在两个版本中看起来相同 - 任何提示？

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

这里是我的jsfiddle：http://jsfiddle.net/hcoa82wb/

Answer 1

问题是.tooltip标签使用display: inline当此更改为display: inline-block IE和Chrome都开始显示工具提示的搞砸版本。从那里，它只是改变top属性，以显示你想要它。 Here is your JS Fiddle updated。我在CSS代码中留下了评论。

在相同的备忘我会建议使用比.tooltip其他不同类的名字，我会恨你碰到在未来的问题，如果有人添加了一个Web部件或第三方的SharePoint插件，使用相同的类名。我过去遇到过这个问题。