使用纯CSS显示气泡提示，表单验证时好用

在使用表单验证时，如果字段验证有错误，比较美观的做法是显示一个气泡提示框，如下图：


其实要实现这个效果，重点就在于那个小三角箭头，下面把HTML和CSS代码贴出来，挺有趣

   
   

    
    
    
    
错误消息
   
   

/* 这是圆角方框的效果 */
.error {
    height:15px;
    background-color:#FFFE36;
    font-size:11px;
    border:1px solid #E1E16D;
    padding:4px 10px;
    color:#000;
    display:none;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius-bottomleft:0;
    -moz-border-radius-topleft:0;
    -webkit-border-bottom-left-radius:0;
    -webkit-border-top-left-radius:0;

    -moz-box-shadow:0 0 6px #ddd;
    -webkit-box-shadow:0 0 6px #ddd;
}
/* 这里是三角箭头的效果 */
.error em {
  display:block;
  width:0;
  height:0;
  border:10px solid;
  border-color:#FFFE36 transparent transparent;
 
  /* 位置*/
  position:absolute;
  bottom:-17px;
  left:60px;
}

根据以上实现方法，我们还可以制作右侧的气泡，效果图如下：

只需对CSS稍作改动

/* 这是圆角方框的效果 */
.error {
    height:15px;
    background-color:#FFFE36;
    font-size:11px;
    border:1px solid #E1E16D;
    padding:4px 10px;
    color:#000;
    display:none;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius-bottomleft:0;
    -moz-border-radius-topleft:0;
    -webkit-border-bottom-left-radius:0;
    -webkit-border-top-left-radius:0;

    -moz-box-shadow:0 0 6px #ddd;
    -webkit-box-shadow:0 0 6px #ddd;
}
/* 这里是三角箭头的效果 */
.error em {
  display:block;
  width:0;
  height:0;
  border:10px solid;
  border-color:transparent #FFFE36 transparent transparent;
 
  /* 位置*/
  position:absolute;
  left:-17px;
}

如果配合jQueryTools Validate来使用，非常方便

$("#contactForm").validator({
	position:"center right",//气泡提示位置显示在右侧
	offset: [0, 10],//由于小三角箭头位置左移，所以要把信息提示的整体位置右移一点，以免戳到表单字段
	message: '
   
   
'//指定消息提示框内部的HTML结构
});