jQuery浮动气泡信息提示插件jQuery Tooltips

Poshy Tip是一个强大的jQuery Tooltips插件,它有多种不同的浮动气泡样式风格。同时可以作为 Form Tooltips使用,表单显示气泡提示信息。并且可以自定义气泡出现的位置。在处理表单验证提示上能带来更好的浏览体验,已经减少自己编写的代码量。

详细的参数说明如下:

  1. $.fn.poshytip.defaults = {
  2. // 提示内容默认为元素的标题,可以使指定的字符串、元素、回调函数、jquery对象
  3. content:‘[title]’,
  4.   // 指定的tips class样式
  5. className:‘tip-yellow’,
  6. //按照像素计算背景图片和显示内容的内边距
  7. bgImageFrameSize:10,
  8. showTimeout:500,// 延时多久开始显示
  9. hideTimeout:100,// 延时多久开始隐藏
  10. timeOnScreen:0,// 自动隐藏之前延时多久
  11. //显示方式 支持’hover’鼠标划入、’focus’ 获取焦点、’none’手动显式调用  
  12. showOn:‘hover’,
  13. liveEvents:false,// 支持live  事件  同样可以对未来元素进行影响  
  14. alignTo:‘cursor’,// 和谁进行对齐 (‘cursor’ 鼠标, ‘target’ 目标元素)
  15. // 水平方向对齐方式 可选参数:
  16. //(‘right’, ‘center’, ‘left’, ‘inner-left’, ‘inner-right’)
  17. alignX:‘right’,
  18. // 垂直方向对齐方式 可选参数:
  19. //(‘bottom’, ‘center’, ‘top’, ‘inner-bottom’, ‘inner-top’)
  20. alignY:‘top’,
  21. offsetX:-22,// 水平偏移量
  22. offsetY:18,// 垂直方向偏移量
  23. //hover显示方式下,允许鼠标离开元素仍然显示提示信息
  24. allowTipHover:true,
  25. // 提示信息随着鼠标移动  只在满足hover显示方式下,对齐方式为alignTo:’cursor’ 才有效  
  26. followCursor:false,
  27. fade:true,// 使用动画
  28. slide:true,// 使用slie效果
  29. slideOffset:8,// slide 动画的偏移量
  30. // 动画显示的时间间隔 如果不想动画效果,设置为0即可
  31. showAniDuration:300,
  32. // 动画隐藏的时间间隔 如果不想动画效果,设置为0即可
  33. hideAniDuration:300
  34. };

核心方法:

  1. .poshytip(‘show’)    手动显示tip
  2. .poshytip(‘hide’)    手动隐藏tip
  3. .poshytip(‘update’, content, [ dontOverwriteOption ] )  手动更新tip
  4. .poshytip(‘disable’)  tip不可用
  5. .poshytip(‘enable’)   tip可用
  6. .poshytip(‘destroy’)  销毁tip

资源下载

隐藏内容:******,购买后可见!

下载价格:5 黑币

您需要先后,才能购买资源

【如果资源链接失效请及时联系站长处理!】 QQ: 785967707

 

喜欢这篇文章吗?按个赞吧,不会令你失望!

发表评论