Tips: 本文创建于2015年7月6日,已超过 2 年,内容或图片可能已经失效!

html

<span class="tooltip"><span class="tooltip-icon">?</span><span class="tip-content"><span class="tip-content-inner">这是Tooltip气泡</span></span></span>  

css

.tooltip{  
    position: relative;  
    display: inline-block;  
    margin-left: 5px;  
    margin-right: 5px;  
    height: 16px;  
    line-height: 16px;  
    vertical-align: middle;  
    margin-top: 70px;
}   
.tooltip-icon{  
    display: block;  
    width: 14px;  
    height: 14px;  
    line-height: 14px;  
    border: 1px solid #999;  
    border-radius: 50%;  
    font-size: 12px;  
    font-weight: 700;  
    font-family: "caption", Arial;  
    text-align: center;  
}  
.tip-content{  
    z-index: 999999;  
    display: none;  
    position: absolute;  
    left: -5px;  
    bottom: 30px;  
    width: 240px;  
}  
.tip-content-inner{  
    position: absolute;  
    bottom: 0;  
    left: 0;  
    display: block;  
    width: auto;  
    max-width: 200px;  
    padding: 10px;  
    line-height: 20px;  
    border: 1px solid #B4CA34;  
    background: #A0AF2D;  
    line-height: 20px;  
    color: #333;  
    font-size: 16px;  
    border-radius: 5px;  
}  
.tip-content-inner:before{  
        content: "";  
    position: absolute;  
    left: 7px;  
    bottom: -24px;  
    border-style: solid solid solid solid;  
    border-color: #B4CA34 transparent transparent transparent;  
    border-width: 12px 6px;  
}  
.tip-content-inner:after{  
    content: "";  
    position: absolute;  
    left: 8px;  
    bottom: -20px;  
    border-style: solid solid solid solid;  
    border-color: #B4CA34 transparent transparent transparent;  
    border-width: 10px 5px;  
}  
.tooltip:hover > .tip-content{  
    display: block;  
}