不久前,公司项目需要给部分显示文字不全的添加提示框,它还要求可以复制提示框里面的文字,思考后,决定用点击事件实现此功能.最终的效果是点击想要全部显示的地方,会出现提示框,点击提示框外的地方,提示框消失
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrap {
width: 100%;
position: absolute;
z-index: 100;
top: 0;
left: 0;
height: 800px;
}
#tooltips {
width: 244px;
border-radius: 4px;
position: relative;
padding: 10px 15px 10px 10px;
background-color: #effdfe;
border: 1px solid #2eb9bf;
}
#tooltips span:nth-of-type(1) {
display: block;
width: 14px;
height: 14px;
position: absolute;
right: 0px;
top: 0px;
background: url(img/close.png) no-repeat;
background-siz