quark-tooltips

Tooltips 提示

当鼠标经停或者点击时，气泡提示信息框显示

使用方法

安装quark-tooltips

 
npm i quark-tooltips
 

在文件中引入quark-tooltips

 
import QuarkTooltips from 'quark-tooltips';
 

基础用法

<quark-tooltips :max-width="200" content="默认顶部显示" >
    <div class="box">任意文案</div>
</quark-tooltips>

<quark-tooltips :max-width="200" content="默认顶部显示" >
    <div><svg style="width:20px;height:20px;" version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 14.8c-3.8 0-6.8-3.1-6.8-6.8 0-3.8 3.1-6.8 6.8-6.8 3.8 0 6.8 3.1 6.8 6.8 0 3.8-3 6.8-6.8 6.8zM7.9 9c.5 0 .9-.4.9-.9v-3c0-.5-.4-.9-.9-.9s-.9.4-.9.9V8c0 .6.4 1 .9 1zm0 .8c-.6 0-1 .4-1 1s.4 1 1 1 1-.4 1-1-.4-1-1-1z" fill="#737383"/></svg></div>
</quark-tooltips>

方向/位置

支持：上左、上、上右、下左、下、下右、左上、左、左下、右上、右、右下

<quark-tooltips position="top-left" content="tips文字">
    <div class="box">上左</div>
</quark-tooltips>
 
<quark-tooltips position="top" content="tips文字">
    <div class="box">上</div>
</quark-tooltips>
 
<quark-tooltips position="top-right" content="tips文字">
    <div class="box">上右</div>
</quark-tooltips>
 
<quark-tooltips position="bottom" content="tips文字">
    <div class="box">下</div>
</quark-tooltips>
 
<quark-tooltips position="left" content="tips文字">
    <div class="box">左</div>
</quark-tooltips>
 
<quark-tooltips position="right" content="tips文字">
    <div class="box">右</div>
</quark-tooltips>
 
....
 

多行

<quark-tooltips :max-width="200" position="top-left"  :multiLine="true" content="我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长" > 
    <div class="box">查看提示</div>
</quark-tooltips>

默认初始展示

<quark-tooltips :max-width="100" position="right" :always="true"  :multiLine="true" content="我的文本超级无敌长我的文本超级无敌长" > 
    <div class="box">查看提示</div>
</quark-tooltips>

禁用提示

<quark-tooltips position="right" content="我的文本超级无敌长" :disabled="disabled" > 
    <div class="box" @click="disabled = !disabled">点击{{msg}}提示气泡</div>
</quark-tooltips>

延迟提示

<quark-tooltips position="top" content="我的文本" :delay="1000" > 
    <div class="box">延迟1秒提示气泡</div>
</quark-tooltips>

Prop

字段	说明	类型	默认值
content	提示文案	String	-
position	方向/位置，可选方向（top、top-left、top-right、bottom、bottom-left、bottom-right、left、left-top、left-bottom、right、right-top、right-bottom）	String	top
maxWidth	气泡框最大宽度	String, Number	-
delay	延迟展示	Number	0
multiLine	是否多行	Boolean	false
always	初始一直展示，直到触发它恢复正常	Boolean	false
disabled	是否禁用	Boolean	false