带箭头的提示框样式制作-原创手记-慕课网

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="tips" content="为了以后方便，把常用的小效果制作整理，如有问题或者更好的方法，请告知！谢谢！！！！">
<meta name="tips" content="不写乱七八糟的的描述，大家直接复制即何使用，涉及到调用JS文件的注意一下路径问题。用最简洁的方法，描述一些基本原理。">
<title></title>
<title>对话框样式</title>
<style>
/原理：
制造◆ 这形状，上面的盖住下面的，留出一象素的距离，做出边线的效果。
一种是通过文字，一种是通过border
有很多人，加我QQ说，不太会用position。简单的讲：
父级：position:relative;不脱离文档文档流，如果不设，子级会往上找父级有这个值的，如果没有一直找到body
子级：position:absolute;子级就会相对于父级来定位。脱离文档流
/
/一、兼容写法，但是结构复杂些/
.dialogBox{position:relative;margin-left:30px;}
.arrow{position:absolute;top:15%;left:-8px;}
.arrow i,.arrow b{display:block;text-shadow: none;font-style:normal;}
.arrow i {color:#fffcef;margin-top:-18px;margin-left:2px;}
.arrow b {color:#ffbb76;}
.dialogBox span{max-width: 500px;min-width:150px;width:auto;display:block;padding:10px;
line-height: 16px;font-size: 12px;color: #db7c22;
word-wrap: break-word;word-break: break-all;border: 1px solid transparent;
background-color: #fffcef;
border-color: #ffbb76;box-shadow: 0 1px 3px #ccc;border-radius: 2px;}

/二、不兼容IE8,结构简单/
.db01{position: relative;max-width: 500px;min-width:150px;width:auto;padding:10px; margin-left:30px;color: #db7c22;font-size: 12px;
background-color: #fffcef; border: 1px solid #ffbb76;box-shadow: 0 1px 3px #ccc;border-radius: 2px;}

.db01:after, .db01:before {top:10%;width: 0;height: 0;position: absolute;content: ' '; border:10px solid transparent; }
.db01:after {left: -18px;border-right-color: #fffcef;}
.db01:before {left:-20px;border-right-color: #ffbb76; }
/三、结合jq，鼠标划过显示提示/
/提示框/
.stringCut{position:relative;}
.stringCut .db {position: absolute;z-index:100;max-width: 500px;min-width:150px;width:auto;padding:10px; margin-left:30px;color: #db7c22;line-height:20px;font-size: 12px;word-wrap: break-word;word-break: break-all;
background-color: #fffcef; border: 1px solid #ffbb76;box-shadow: 0 1px 3px #ccc;border-radius: 2px;}
.stringCut .db:after,.stringCut .db:before {left:30%;width: 0;height: 0;position: absolute;content: ' '; border:10px solid transparent; }
.stringCut .db:after {top: -18px;border-bottom-color: #fffcef;}
.stringCut .db:before {top:-20px;border-bottom-color: #ffbb76;}
</style>
<script src="js/jquery-1.7.2.js"></script>
<script>
$(document).ready(function(){
stringCut(".stringCut",120);
function stringCut(objID,num){
var str=jQuery(objID).html();
$(objID).on('mouseover',function(){
$(objID).append('<div class="db">'+str+'</div>');
}).on('mouseout',function(){
$(".db").remove();
});
}
});
</script>
</head>
<body>
<h1>一、结构复杂些</h1>
<div class="dialogBox">
<div class="arrow">
<b>◆</b>
<i>◆</i>
</div>
<span>fdsafewrewqwe</span>
</div>
<h1>二、结构简单</h1>
<div class="db01">dfsaerwqrewqrew</div>
<h1>划过出现</h1>
<div><label>邮箱</label><span class="stringCut">fdkslajdksljf@163.com</span></div>
</body>