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插件，使用相同的類名。我過去遇到過這個問題。