文字提示

常用于展示鼠标hover时提示的信息。

基础用法

Tooltip组件提供了9个展示位置。包括：top-left上左侧,top正上方,top-right上右侧,right-top右上方,right正右侧,right-bottom右下方,bottom-right下右侧,bottom正下方,bottom-left下左侧,left-bottom左下方,left正左侧,left-top左上方。

<button id="tooltip1" class="woui-btn woui-btn-basic woui-btn-blue">上左</button>
<button id="tooltip2" class="woui-btn woui-btn-basic woui-btn-blue">上边</button>
<button id="tooltip3" class="woui-btn woui-btn-basic woui-btn-blue">上右</button>
<button id="tooltip4" class="woui-btn woui-btn-basic woui-btn-blue">右上</button>
<button id="tooltip5" class="woui-btn woui-btn-basic woui-btn-blue">右边</button>
<button id="tooltip6" class="woui-btn woui-btn-basic woui-btn-blue">右下</button>
<button id="tooltip7" class="woui-btn woui-btn-basic woui-btn-blue">左上</button>
<button id="tooltip8" class="woui-btn woui-btn-basic woui-btn-blue">左边</button>
<button id="tooltip9" class="woui-btn woui-btn-basic woui-btn-blue">左下</button>
<button id="tooltip10" class="woui-btn woui-btn-basic woui-btn-blue">下左</button>
<button id="tooltip11" class="woui-btn woui-btn-basic woui-btn-blue">下边</button>
<button id="tooltip12" class="woui-btn woui-btn-basic woui-btn-blue">下右</button>

var TooltipName = new woUI.Tooltip({ 
     el:   'id或者classname名 just like ('#tooltip1' or '.woui-btn')',
     html: '提示框内的内容 just like ('上左' or '上边' 等)',
     type: '提示框所在的位置 just like ('top-left' or 'top' 等)',
})

主题

Tooltip组件提供了自定义主题，参数包括：boxBorderColor(tooltip的边框颜色)、BoxBgColor(tooltip的背景颜色)和BoxTextColor(tooltip内的字体颜色）。

1
2
3

<button id="tooltip13" class="woui-btn woui-btn-basic woui-btn-blue">默认效果</button>
<button id="tooltip14" class="woui-btn woui-btn-basic woui-btn-blue">自定义主题</button> 
<button id="tooltip15" class="woui-btn woui-btn-basic woui-btn-blue">自定义主题</button>

var Tooltip13 = new woUI.Tooltip({
  el: '#tooltip13',
  html: '您的密码无法正常输入',
  type: 'right',
})
var Tooltip14 = new woUI.Tooltip({
  el: '#tooltip14',
  html: '您的密码无法正常输入',
  type: 'right',
  boxBorderColor:'#000',
  BoxBgColor:'#666',
  BoxTextColor:'#fff',
})
var Tooltip15 = new woUI.Tooltip({
  el: '#tooltip15',
  html: '您的密码无法正常输入',
  type: 'right',
  boxBorderColor:'#C1E9F5',
  BoxBgColor:'#F4FCFF',
  BoxTextColor:'#666',
})

内容扩展

Tooltip组件提供了自定义内容，可以是文字，也可以是图片。

1
2

<button id="tooltip16" class="woui-btn woui-btn-basic woui-btn-blue">自定义内容（文字）</button>
<button id="tooltip17" class="woui-btn woui-btn-basic woui-btn-blue">自定义内容（图片）</button>

var Tooltip16 = new woUI.Tooltip({
    el: '#tooltip16',
    html: '浮层内容文案',
    type: 'right'
})  
var Tooltip17 = new woUI.Tooltip({
    el: '#tooltip17',
    html: '<img src="image/二维码.png">',
    type: 'right-top',
})

API

初始化

new woUI.Tooltip(queryString)

queryString: 可以传入 Element.querySelector 支持字符串，也可以传入元素，例如：{el:’id or class’,…}。

属性

参数	说明	类型	可选值	默认值
放置（type）	tooltip出现的位置	串	顶/顶开始/顶端/底/底开始/底端/左/左开始/左端/右/右启动/右端	右
el	元素名称	串
html	tooltip框内容	串	文字或者插入图片
boxBorderColor	tooltip框的边框颜色	串	所有颜色	#E0E0E0
BoxBgColor	tooltip框的背景颜色	串	所有颜色	#fffff
BoxTextColor	tooltip框的文字颜色	串	所有颜色	#666666

文字提示