在使用form表單元素時，比如input元素可能會有這樣的需求，當在input輸入框輸入無效的文本時，你可能需要在input上方或者下方出現一個懸浮提示框來提示用戶，或者當input輸入框爲空且失去焦點時，你需要有一個提示框來提醒用戶。面對這樣的需求你可能一時找不到合適的組件來達到目的，只能自己去實現，比較麻煩。本文介紹一個組件: form-tooltip，就是解決這個問題，用戶可以根據自己的需求自己設置不同樣式的懸浮提示框。效果圖如下：
git代碼庫：https://github.com/yog-zhang/form-tooltip.git
1.安裝引入
（1）下載node包
npm install form-tooltip --save
在需要使用的代碼中導入該插件
import FormTooltip from './form-tooltip.js'
（2）或從github上下載代碼全局引入
<script src='./form-tooltip.js'></script>
2. 使用
（1）創建提示框組件對象
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'
})
渲染HTML如下：
<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',前面部分的名字是固定的；
渲染效果如下：
（2）設置提示框文本值
formTooltip.setValue(text)
如：formTooltip.setValue('輸入的文本無效')
（3）設置提示框顯示隱藏
formTooltip.setShow(showFlag)
參數說明：
showFlag: Boolean類型的值，爲true表示顯示提示框，爲false表示隱藏提示框。如：formTooltip.setShow(true)
（4）獲取提示框顯示隱藏標誌
formTooltip.isShow()
返回值是一個Boolean值，爲true表示提示框處於顯示狀態，爲false表示提示框處於隱藏狀態
（5）獲取提示框的一些配置選項
formTooltip.getOptions()
返回值是一個對象，如下：
{
id: 綁定的form表單id選擇器
options: 創建提示框對象時，傳入的options參數，即構造函數的第二個參數
cssTextObj: 創建提示框對象時，傳入的cssTextObj參數，即構造函數的第三個參數
showFlag: 提示框的顯示隱藏狀態標誌
formNode: 綁定的表單元素節點
tooltipNode: 實例化的提示框元素節點
}
下一節會貼出來使用demo，也可以在GitHub上直接查看demo