Question

我的网站正在使用css来显示工具提示。我正在使用伪类来实现css中的工具提示功能。以下是css代码。

.tooltip
{
    display: inline;
    position: relative;
}

.tooltip:hover:after
{
    background: #333;
    background: rgba(0,0,0,1);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    border-radius: 3px;
    top: -11px;
    color: #fff;
    content: attr(text);
    right: 25px;
    padding: 5px 15px 5px 15px;
    position: absolute;
    z-index: 1000;
    width: auto;
    height:auto;
}

.tooltip:hover:before
{
    border-style: solid;
    border-color: transparent #333 transparent #333;
    border-width: 6px 0px 6px 6px;
    top: -5px;
    content: "";
    right: 20px;
    position: absolute;
    z-index: 1000;
}

以下是HTML代码

<div id = "div_toolTip" class="tooltip" runat="server">
                        <a id="alnk_user" runat="server" class="icon user" ></a>
</div>

此代码在ie即9，即11，firefox，chrome和safari中运行正常。但它在IE10中不起作用。请建议我在哪里寻找解决方案。我尝试过改变DOCTYPE但是没有用。

Answer 1

以下是IE5 +的工具提示解决方案，此后无需提及其他浏览器和平台..：P

Demo

CSS

#div_toolTip {
    margin:100px;
}

.tooltip {
    position:relative;
    /* make span relative to anchor */
    text-decoration:none;
    /* no underline */
    cursor:pointer;
    /* make cursor point */
}
.tooltip span {
    /* main body of tooltip */
    position:absolute;
    /* AP it */
    bottom:66px;
    /* FADE IN/OUT BEGIN */
    left:50%;
    /* CENTER TOOLTIP */
    margin-left:-72px;
    /* CENTER TOOLTIP */
    width:130px;
    /* tootip width */
    opacity:0;
    /* HIDE TOOLTIP in modern browsers */
    visibility:hidden;
    /* HIDE TOOLTIP in IE */
    padding:10px 5px;
    /* padding */
    color:#fff;
    /* text color */
    font:bold 75%/1.5 Arial, Helvetica, sans-serif;
    /* font */
    text-align:center;
    /* center text */
    pointer-events:none;
    /* no unintended tooltip popup for modern browsers */
    border-radius:6px;
    /* round corners */
    text-shadow:1px 1px 2px rgba(0, 0, 0, 0.6);
    /* text shadow */
    background:rgb(46, 182, 238);
    /* IE6/7/8 */
    background:rgba(46, 182, 238, .8);
    /* modern browsers */
    border:2px solid rgb(255, 255, 255);
    /* IE6/7/8 */
    border:2px solid rgba(255, 255, 255, .8);
    /* modern browsers */
    box-shadow:0px 2px 4px rgba(0, 0, 0, 0.5);
    /* shadow */
    -webkit-transition:all 0.3s ease-in-out;
    /* animate tooltip */
    -moz-transition:all 0.3s ease-in-out;
    /* animate tooltip */
    -o-transition:all 0.3s ease-in-out;
    /* animate tooltip */
    -ms-transition:all 0.3s ease-in-out;
    /* animate tooltip */
    transition:all 0.3s ease-in-out;
    /* animate tooltip */
}
.tooltip span.dif {
    /* different width tooltip */
    width:190px;
    /* width */
    margin-left:-102px;
    /* center it */
}
.tooltip span:before, .tooltip span:after {
    /* bottom triangle - the white border */
    content:'';
    /* add html content */
    position:absolute;
    /* AP bottom triangle */
    bottom:-13px;
    /* position bottom triangle */
    left:50%;
    /* center bottom triangle */
    margin-left:-12px;
    /* center bottom triangle */
    border-left:12px solid transparent;
    /* build bottom triangle */
    border-right:12px solid transparent;
    /* build bottom triangle */
    border-top:12px solid rgb(255, 255, 255);
    /* build bottom triangle IE6/7/8 */
    border-top:12px solid rgba(255, 255, 255, .8);
    /* build bottom triangle modern browsers */
}
.tooltip span:after {
    /* top triangle - the blue background */
    bottom:-10px;
    /* position top triangle */
    margin-left:-10px;
    /* center top triangle */
    border-width:10px;
    /* build top triangle */
    border-top:10px solid rgb(46, 182, 238);
    /* build top triangle IE6/7/8 */
    border-top:10px solid rgba(46, 182, 238, .8);
    /* build top triangle modern browsers */
}
.tooltip:hover span {
    /* reveal tooltip */
    opacity:1;
    /* REVEAL TOOLTIP in modern browsers */
    bottom:44px;
    /* FADE IN/OUT END */
    visibility:visible;
    /* REVEAL TOOLTIP in IE */
}
.tooltip span:hover {
    visibility:hidden;
    /* hide tooltip when moving from link to span in IE */
}
@media screen and (min-device-width:320px) and (max-device-width:768px) {
    .tooltip span {
        display:none;
    }
    .tooltip:hover span {
        display:block;
    }
}
/* iPad & iPhone simulate :hover */

伪元素css工具提示在ie10中不起作用

1 个答案: