鼠标悬停帮助图标显示文字提示框代码

<style type="text/css">
    .help-tip {
        cursor:pointer;
        text-align: left;
        font-size: 14px;
        background-color: #FFFF80;
        padding-top: 5px;
        padding-left: 10px;
    }
</style>

<i class="fa fa-question-circle" οnmοuseοver="onmouseover_help(this,event)" οnmοuseοut="onmouseout_help(this)" ></i>

<div id="help1" style="display:none;position:absolute;z-index:1;" class = "help-tip"></div>

 

 

function onmouseover_help(ele,event){
    var x,y;
    x = event.clientX + 10;
    y = event.clientY + 10;
    document.getElementById("help1").innerHTML = "<div class=''>说明：</br>1.应检人数：学生人数。</br>2.实检人数：当日完成晨检且识别出了人脸的学生人数。</br>3.缺检人数：应检人数-实检人数。（包含人脸拒识别和误识别）</br>4.机器人总检人次：机器人总计完成晨检的次数。</div>";
    document.getElementById("help1").style.display = "block";
    document.getElementById("help1").style.left = (x+'px');
    document.getElementById("help1").style.top =  (y+'px');
}
function onmouseout_help(){
    document.getElementById("help1").innerHTML = "";
    document.getElementById("help1").style.display = "none";
}