当前位置:Gxlcms > JavaScript > 属于你的jQuery提示框(Tip)插件_javascript技巧

属于你的jQuery提示框(Tip)插件_javascript技巧

时间:2021-07-01 10:21:17 帮助过:3人阅读

插件可以满足常用的提示显示,支持12个方向,支持边框、背景色、文本颜色自定义,支持位置微调、层级微调、宽度间距等参数调整。

先看看效果:

tips:提示信息组件
参数:

  • msg:'asdf',内容
  • dire:2,方向
  • w:250,宽度
  • _x:0,横向偏移
  • _y:0,纵向偏移
  • zIndex:100000,层级
  • borderColor:#FFF,边框颜色
  • bgColor:#FFF,背景颜色
  • useHover:true是否使用悬浮显示
  • color:默认提示文字颜色
  • padding:边距

javascript代码:

CSS:

.tip-wrap {
  position: absolute;
  display: none;
}

.tip-arr-a, .tip-arr-b {
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  border-style: dashed;
  border-color: transparent;
}
page:

我是测试数据

效果:


以上就是一款简简单单的jQuery提示框(Tip)插件,希望大家可应用到自己的项目中,有所收获。

人气教程排行