首页 > 技术文章 > javascript中简单提示框

pangpanghuan 2017-03-03 20:22 原文

CSS部分

.help-tip{
    width: 340px;
    border:1px solid #A0A0A0;
    background-color: #F8F8F8;
    border-radius: 5px;
    display: none;
    position: absolute;
    z-index:5555;
    left: 0;
}

.help-tip p{
    margin: 5px 7px;
    font-size: 13px;
    color: black;
    line-height: 1.2;
}

JS部分

function show(){
    $(".help-tip").css("left", $(".help-tip").parent().width());
    $(".help-tip").css("display","block");
}
function hide(){
    $(".help-tip").css("display","none");
}

HTML部分

<div class="width:100px;height:50px;">
  <input onfocus="show()" onblur="hide()"/>
  <div class="help-tip">
    <p>This is a<br>Tip </p>
  </div>
</div>

 

推荐阅读