提示效果

Tips组件已经打包为单独的组件,可脱离UI总组件单独使用。
下载组件

点击提示

<button class="ui-btn ui-dialog-show">标准对话框</button>
<button class="ui-btn ui-tips" data-type="click" data-align="left" data-title="我是提示文字1">Left</button>
<button class="ui-btn ui-tips" data-type="click" data-align="top" data-title="我是提示文字2">Top</button>
<button class="ui-btn ui-tips" data-type="click" data-align="right" data-title="我是提示文字3">Right</button>
<button class="ui-btn ui-tips" data-type="click" data-align="bottom" data-title="我是提示文字4">Bottom</button>
<button class="ui-btn ui-tips" data-type="click" data-align="bottom-left" data-pic="https://www.sdcms.cn/upfile/2017/05/1494075936753.jpg" data-title="我是提示文字4">Image</button>

悬停提示

<button class="ui-btn ui-dialog-show" data-align="top-left">左上角</button>
<button class="ui-btn ui-dialog-show" data-align="top-right">右上角</button>
<button class="ui-btn ui-dialog-show" data-align="bottom-left">左下角</button>
<button class="ui-btn ui-dialog-show" data-align="bottom-right">右下角</button>

背景颜色

<button class="ui-btn ui-tips" data-align="left" data-title="我是提示文字1" data-color="red">Left</button>
<button class="ui-btn ui-btn-blue ui-tips" data-align="top" data-title="我是提示文字2" data-color="yellow">Top</button>
<button class="ui-btn ui-btn-red ui-tips" data-align="right" data-title="我是提示文字3" data-color="blue">Right</button>
<button class="ui-btn ui-btn-yellow ui-tips" data-align="bottom" data-title="我是提示文字4" data-color="green">Bottom</button>
<button class="ui-btn ui-tips" data-align="bottom-left" data-title="我是提示文字5" data-color="info">Bottom-Left</button>
<button class="ui-btn ui-tips" data-align="top-left" data-title="我是提示文字6" data-color="black">Top-Left</button>

自定义宽度

<button class="ui-btn ui-tips" data-width="200px" data-align="top" data-title="时代网站信息管理系统是成都生动网络科技有限公司旗下产品,简称:SDCMS(计算机软件著作权登记号:2013SR024100,SDCMS为我司注册商标),自2008年发布第一个产品以来,历经十年的成长与发展,我们的产品为数十万中小企事业单位提供了源动力。">Top</button>
<button class="ui-btn ui-tips" data-width="400px" data-align="right" data-title="时代网站信息管理系统是成都生动网络科技有限公司旗下产品,简称:SDCMS(计算机软件著作权登记号:2013SR024100,SDCMS为我司注册商标),自2008年发布第一个产品以来,历经十年的成长与发展,我们的产品为数十万中小企事业单位提供了源动力。">Right</button>
<button class="ui-btn ui-tips" data-width="600px" data-align="bottom" data-title="时代网站信息管理系统是成都生动网络科技有限公司旗下产品,简称:SDCMS(计算机软件著作权登记号:2013SR024100,SDCMS为我司注册商标),自2008年发布第一个产品以来,历经十年的成长与发展,我们的产品为数十万中小企事业单位提供了源动力。">Bottom</button>
<button class="ui-btn ui-tips" data-width="800px" data-align="left" data-title="时代网站信息管理系统是成都生动网络科技有限公司旗下产品,简称:SDCMS(计算机软件著作权登记号:2013SR024100,SDCMS为我司注册商标),自2008年发布第一个产品以来,历经十年的成长与发展,我们的产品为数十万中小企事业单位提供了源动力。">Left</button>

通过JS调用

<input id="mytips1">
<input id="mytips2">
<script>
$(function()
{
$.tips(
{
text:'请输入提示域名',
id:'#mytips1',
align:'bottom-left',
color:'red',
time:0
});
$.tips(
{
text:'请输入提示域名',
id:'#mytips2',
align:'right-top'
});
})
</script>

参数说明

参数 默认值 是否必须 参数说明
text 提示内容
id 对应的ID
time 5 默认5秒自动消失,为0时不消失
align 对齐方式,可选值:left,top,right,bottom,bottom-left,top-left,right-top
color 背景色,可选值:red,yellow,blue,green,info,black