xy-uitips
文字提示气泡框。类似于元素属性title。
使用方式
html
<!-- 引入 -->
<script type="module">
import '../components/tips/index.js';
</script>
<!-- 使用 -->
<xy-tips tips="this is a tip">
<xy-button>button</xy-button>
</xy-tips>
TIP
xy-tips标签不包含任何样式，也不会影响页面布局，你可以当做这层标签不存在
提示tips
提示文字。如果不设置则不显示提示。
html
<xy-tips tips="this is a tip">
<p>鼠标放上来试试~</p>
</xy-tips>
JavaScript操作get、set
js
tips.tips;
tips.tips = 'some tips';
//原生属性操作
tips.getAttribute('tips');
tips.setAttribute('tips','some tips');
方向dir
通过dir可以设置气泡框方向，默认为top，可以取值top、right、bottom、left、TL、TR、RT、RB、BL、BR、LT、LB。
html
<xy-tips dir="top" tips="some tips">
<xy-button>top</xy-button>
</xy-tips>
JavaScript操作get、set
js
tips.dir;
tips.dir = 'right';
//原生属性操作
tips.getAttribute('dir');
tips.setAttribute('dir','right');
除了上述 12 个方位外，还可以设置两个值，以逗号分隔，比如top,bottom，可以自动根据位置来选择一个合适的方向。
html
<xy-tips tips="some tips" dir="top,bottom">
<xy-button>top,bottom</xy-button>
</xy-tips>
类型type
可以通过type设置提示框的颜色，有三种类型success、error、warning
html
<xy-tips tips="success tips" type="success">
<xy-button>success</xy-button>
</xy-tips>
<xy-tips tips="warning tips" type="warning">
<xy-button>warning</xy-button>
</xy-tips>
<xy-tips tips="error tips" type="error">
<xy-button>error</xy-button>
</xy-tips>
JavaScript操作get、set
js
tips.type;
tips.type = 'success';
//原生属性操作
tips.getAttribute('type');
tips.setAttribute('type','success');
颜色color
通过color可以设置提示框为任意颜色，优先级高于type。
html
<xy-tips tips="some tips" color="royalblue">
<xy-button>custom color</xy-button>
</xy-tips>
JavaScript操作get、set
js
tips.color;
tips.color = 'red';
//原生属性操作
tips.getAttribute('color');
tips.setAttribute('color','red');
触发方式trigger
还可以通过trigger属性定义触发方式，默认为hover,focus，还可以设置为click，也可任意组合
TIP
仅用于初始化，后续修改无效。
html
<xy-tips tips="some tips" trigger="hover">
<xy-button>hover</xy-button>
</xy-tips>
<xy-tips tips="some tips" trigger="focus">
<xy-button>focus</xy-button>
</xy-tips>
<xy-tips tips="some tips" trigger="click">
<xy-button>click</xy-button>
</xy-tips>
显示open
可以设置触发方式trigger为none，或者open默认存在，可以通过open属性可以主动控制提示框的出现时机，不再跟随hover,focus
适用于表单错误信息描述。
html
<xy-tips tips="some tips" trigger="none" open>
<xy-button>tips is open</xy-button>
</xy-tips>
JavaScript操作set
js
tips.open = true;
tips.open = false;
//原生属性操作
tips.setAttribute('open',true);
命令式静态方法tips.init()
除了使用<xy-tips></xy-tips>标签外，还可以通过命令式方式进行初始化，参数和前面保持一致
js
import tips from '../components/tips/index.js'
const tip = tips.init(el, {
tips : '提示', // 提示文字
dir : 'top,bottom', // 方向
trigger : ['hover'], // 触发方式
...
})
适用于更加灵活的业务场景（原生环境）。例如，点击一个按钮，让其他元素出现tips
这是一段文本点击我出现 tips~
使用tips.init创建，然后通过open属性控制显示
js
const tip = tips.init(el, {
tips : '这是通过new Tip生成的提示',
trigger: 'none',
open: false,
type: 'error'
})
button.onclick = () => {
tip.open = !tip.open
}