表单元素悬浮提示框

form-tooltip是用来作为表单元素，比如input、textarea的悬浮提示框。 当你在input输入框输入无效的文本时，需要一个提示框进行提示， 或者当input输入框不能为空，用作为空校验提示等，这些都是它作用的地方

下载node包
npm install form-tooltip --save 在需要使用的代码中导入该插件 import FormTooltip from './form-tooltip.js'

或全局引入
<script src='./form-tooltip.js'></script>

let formTooltip = new FormTooltip(id, options, cssTextObj)

说明:
id: 必选项，绑定的input输入框的id选择器名称，如下面的'input'
options: 必选项，是一个对象，用于配置提示框的一些选项，每一个选项除了value都非必选，都有一个默认值。value字段是必填项。详情如下：

{ value: '输入文本无效', //提示框文本 mode: 1, //模式，支持两种模式，可选值为0、1,0代表提示框有边框而没有背景色，1代表提示框有背景色而没有边框 trianglePosition: '10%', //设置提示小三角在提示框上的水平位置，位置时从右往左开始 triangleHeight: '8px', //设置提示小三角垂直高度 triangleSize: '1px', //设置提示小三角边框宽度 direction: 'bottom', //设置提示框在表单元素的上下位置，可选值'top'、'bottom','top'表示提示框在表单元素上方 borderColor: 'blue' //设置提示框边框颜色（包括文本框和小三角边框），只对mode=0有效 }

cssTextObj: 是一个json对象，设置提示框的类样式，反映在HTML中就是下面的类'form-tooltip-0'， 其中类名后面的'0'表示该提示框实例化的序号，即是第几个实例化的提示框。该参数为非必选项，不传此参数会有默认值替代

事例如下：

let formTooltip = new FormTooltip('input', { value: '输入文本无效！', mode: 1, trianglePosition: '10%', triangleHeight: '8px', triangleSize: '1px', direction: 'bottom', // 只对mode=0时有效 borderColor: '#888' }, { 'width': '100px', 'height': '30px', 'line-height': '30px', 'text-align': 'center', 'border': '1px solid black', 'background-color': '#888', 'font-size': '12px', 'position': 'absolute', 'left': '20px', 'top': '31px', 'border-radius': '4px 4px' })

渲染如下：

<input type="text" id="input"> //表单元素要自己写，不是提示框组件渲染出来的 <div class="form-tooltip-common form-tooltip-0"> <span class="form-tooltip-text">输入文本无效！</span> <div class="form-tooltip-triangle-0"> ::before </div> </div>

备注：可以看到提示框div元素有两个类选择器，第一个类选择器名字是固定的，所有的下拉框实例共同的类选择器都是'form-tooltip-common'， 所以可以通过这个类选择器对所有的下拉框设置共同的样式。第二个类选择器是根据该下拉框是第几个被创建的实例， 如'form-tooltip-0'则表示是第一个被创建的下拉框实例，所以后面是索引'0',前面部分的名字是固定的；

formTooltip.setValue(text)

例如：formTooltip.setValue('输入的文本无效')

formTooltip.setShow(showFlag)

说明：
showFlag: Boolean类型的值，为true表示显示提示框，为false表示隐藏提示框。
例如：formTooltip.setShow(true)

formTooltip.isShow()

返回值是一个Boolean值，为true表示提示框处于显示状态，为false表示提示框处于隐藏状态

formTooltip.getOptions()
返回值是一个对象，如下：

{ id: 绑定的form表单id选择器 options: 创建提示框对象时，传入的options参数，即构造函数的第二个参数 cssTextObj: 创建提示框对象时，传入的cssTextObj参数，即构造函数的第三个参数 showFlag: 提示框的显示隐藏状态标志 formNode: 绑定的表单元素节点 tooltipNode: 实例化的提示框元素节点 }