Question

web页面中如图所示（红圈部分）的提示框是怎么做出来的，是jquery,js+css画出来的吗，还是图片做的DIV?

请不要说是用插件，各种插件能实现这个我也知道。我想问的是底层实现原理！各路大神请赐教！

Answer 1

每个输入项目，input框，都对应一个span标记。span标记内的内容，就是你看到的红圈内德错误提示信息。
input输入框，和默认隐藏的span标记都处于同一个父元素P标记内。
P标记的position是relative的。
而span标记的position是absolute的。
设置为position:abosolute的span标记，将根据最近的一个设置为relative定位的父元素进行定位。

因此span标记就可以通过设置left以及top属性，进行定位。
因为已知input框的大小，长度，等，就可以精确设定span标记的定位点，
看起来就跟吸附在input框右侧的效果。

还有，你要问提示信息栏左侧突出的那个小尖尖是怎么出来的话，其实那就是背景图片而已。

Answer 2

这玩意儿叫tip框

原理是，触发事件后，会先根据自定义的位置，以该位置为起点，生成一个div框并显示

你看他的高度明显超过了左边的input框，所以不会是span标签，而第一个input旁边那个“填写邮箱”的就是span标签了

Answer 3

是div+图片做的！当鼠标focus到input上面的时候会出发这个div的显示
当按下键盘输入字符后js会把该字符的长度以及复杂程度通过正则来判断
然后得出当前字符的复杂强度等级~反馈到div上就是控制某个元素变化css~~！

Answer 4

最简单的就是整个切一张图。
然后通过定位一个层(用亮色背景)与覆盖在灰色进度条上。控制宽度可以达到强弱的视觉效果(起始宽度为零，然后密码强度达到某一个点就增加宽度，这里需要用 js 控制)。