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的{{1}}标记当这更改为display: inline时，IE和Chrome开始显示工具提示的混乱版本。从那里只需更改display: inline-block属性即可显示您的需求。 Here is your JS Fiddle updated。我在CSS代码中留下了评论。

在同一个说明中，我建议使用除top以外的其他类名。如果有人添加使用该版本的WebPart或第三方SharePoint插件，我会讨厌将来遇到问题相同的班级名称。我过去遇到过这个问题。

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

1 个答案: