Js+Css实现鼠标悬浮在特定位置，显示提示信息

 <link href="/static/font/css/font-awesome.min.css" rel="stylesheet" />

<i class="fa fa-question-circle" style="cursor: pointer;"></i>
<div class="demo" style="display:none">
    <div>
       <p>
          <span style="font-weight:600">您好：</span>该下班了。
       </p>
    </div>
</div>

$(function () {
    $(".fa-question-circle").hover(
    function () {
        $(".demo").show();

    });
    $(".fa-question-circle").mouseout(
        function () {
            $(".demo").hide(); //$(this).hide();      
        });
});

   .fa-question-circle {
     cursor: pointer;//实现鼠标活动“？”变成小手
   }
   .demo {
      width: 300px;
      font-size: 12px;
      height: 85px;
      position: absolute;
      top: -10%;
      left: 0%;
      border: 2px solid #ffffff;
      border-radius: 8px;
      background-color: #ffffff;
      box-shadow: 2px 4px 5px #eeeaea;
    }

    .demo p {
     padding: 5px 8px;
    }

    .demo:after {
      content: ‘‘;
      position: absolute;
      border: 10px solid transparent;
      border-top-color: #ffffff;
      top: 100%;
      /*left: 37px;*/
      left: 37%;
    }