文字提示

本功能只适用于PC端。

基础用法

使用.vus-tips类作为文字提示的样式。但需要包含v--text=""属性,作为提示内容。(注:已设max-width: 260px。)

默认提示(放“鼠”过来) 《孟子》
《大学》
<a class="vus-tips" v--text="我是默认提示啦!">默认提示</a>
<span class="vus-tips" v--text="为孟子、孟子弟子、再传弟子的记录。">《孟子》</span>
<div class="vus-tips" v--text="大学之道,在明明德,在亲民,在止于至善。">《大学》</div>

提示位置

  • 添加指定类来改变提示内容方向。
  • .left:左侧提示。
  • .right:右侧提示。
  • .bottom:底部提示。
左侧提示 右侧提示
底部提示
<a class="vus-tips left" v--text="内容在左侧显示!">左侧提示</a>
<span class="vus-tips right" v--text="内容在左侧显示!">右侧提示</span>
<div class="vus-tips bottom" v--text="内容在底部显示!">底部提示</div>

尺寸

  • 设置固定宽度和自动换行效果。
  • .small:小型提示,宽度为100px
  • .large:大型提示,宽度为260px
小型提示 大型提示
小型提示(左侧)
大型提示(左侧) 小型提示(右侧)

大型提示(右侧)

小型提示(底部)

大型提示(底部)

<a class="vus-tips small" v--text="小型提示">小型提示</a>
<span class="vus-tips large" v--text="大型提示">大型提示</span>
<p class="vus-tips small right" v--text="小型提示(右侧)">小型提示(右侧)</p>
<div class="vus-tips large bottom" v--text="大型提示(底部)">大型提示(底部)</div>

颜色

  • 添加指定类来改变提示框的颜色。
  • .primary:主要、首选。
  • .success:成功。
  • .warning:警告。
  • .danger:危险。
  • .info:信息。
  • .dark:暗黑。
  • .light:亮灰。
  • .white:白色。
首选(primary) 成功(success)
警告(warning)
危险(danger)
信息(info)
暗黑(dark)
亮灰(light)
白色(white)
白色(white)
白色(white)
白色(white)
<a class="vus-tips primary" v--text="首选(primary)">首选(primary)</a>
<span class="vus-tips success" v--text="成功(success)">成功(success)</span>
<div class="vus-tips warning" v--text="警告(warning)">警告(warning)</div>
<div class="vus-tips danger" v--text="危险(danger)">危险(danger)</div>
<div class="vus-tips info" v--text="信息(info)">信息(info)</div>
<div class="vus-tips dark" v--text="暗黑(dark)">暗黑(dark)</div>
<div class="vus-tips light" v--text="亮灰(light)">亮灰(light)</div>
<div class="vus-tips white" v--text="白色(white)">白色(white)</div>