使用layer插件模拟excel批注效果

                            使用layer插件模拟excel批注效果

 最近收到需要在网页上显示类似excel批注效果的需求.鼠标移上文字获取点击文字时就显示出提示信息

效果图:

鼠标移上标注说明时就显示出提醒信息.

具体实现:

利用layer插件,弹出msg信息,并且获取当前需要提醒的文字的元素位置后,再设置layer弹出层的位置即可.

具体代码实现:

//获取当前元素的位置,减去80可以根据自己需要调,是为了显示在该元素的上面
var top = showSpan.offset().top-80 +"px";
//在用layer显示出提醒层 offset是设置提醒层显示位置,anim是显示动画,这里5是渐显 具体是查官方文档
layer.msg(title, { offset: [top], anim: 5 })