quark-tooltips v1.0.3

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