Tooltip 文字提示

使用指南

气泡式文字提示组件，可添加描述；若是菜单内容，请使用Popover组件；

与h3-mobile-vue组件的区别以及迁移

新组件

代码演示

查看代码

<template>
  <div>
    <br />
    <br />
    <br />
    <br />
    <div class="top">
      <h3-tooltip content="上左" placement="top-start">
        <h3-button size="small" inline>
          上左
        </h3-button>
      </h3-tooltip>
      <h3-tooltip content="上边" placement="top">
        <h3-button size="small" inline>
          上边
        </h3-button>
      </h3-tooltip>
      <h3-tooltip content="上右" placement="top-end">
        <h3-button size="small" inline>
          上右
        </h3-button>
      </h3-tooltip>
    </div>
    <div class="center">
      <div class="center-left">
        <h3-tooltip content="左上" placement="left-start">
          <h3-button size="small" inline>
            左上
          </h3-button>
        </h3-tooltip>
        <br />
        <br />
        <h3-tooltip content="左边" placement="left">
          <h3-button size="small" inline>
            左边
          </h3-button>
        </h3-tooltip>
        <br />
        <br />
        <h3-tooltip content="左下" placement="left-end">
          <h3-button size="small" inline>
            左下
          </h3-button>
        </h3-tooltip>
      </div>
      <div class="center-right">
        <h3-tooltip content="右上" placement="right-start">
          <h3-button size="small" inline>
            右上
          </h3-button>
        </h3-tooltip>
        <br />
        <br />
        <h3-tooltip content="右边" placement="right">
          <h3-button size="small" inline>
            右边
          </h3-button>
        </h3-tooltip>
        <br />
        <br />
        <h3-tooltip content="右下" placement="right-end">
          <h3-button size="small" inline>
            右下
          </h3-button>
        </h3-tooltip>
      </div>
    </div>
    <div class="bottom">
      <h3-tooltip content="下左" placement="bottom-start">
        <h3-button size="small" inline>
          下左
        </h3-button>
      </h3-tooltip>
      <h3-tooltip content="下边" placement="bottom">
        <h3-button size="small" inline>
          下边
        </h3-button>
      </h3-tooltip>
      <h3-tooltip content="下右" placement="bottom-end">
        <h3-button size="small" inline>
          下右
        </h3-button>
      </h3-tooltip>
    </div>
    <div class="pop-item">
      <h3-tooltip :content="content" width="100vw" type="primary">
        <h3-button size="small" inline>
          主色
        </h3-button>
      </h3-tooltip>
    </div>
    <div class="pop-item">
      <h3-tooltip :content="content" width="100vw" type="warning">
        <h3-button size="small" inline>
          警告
        </h3-button>
      </h3-tooltip>
    </div>
    <div class="pop-item">
      <h3-tooltip :content="content" width="100vw" type="error">
        <h3-button size="small" inline>
          错误
        </h3-button>
      </h3-tooltip>
    </div>
    <div class="pop-item">
      <h3-tooltip :content="content" width="100vw" type="success">
        <h3-button size="small" inline>
          成功
        </h3-button>
      </h3-tooltip>
    </div>
  </div>
</template>

<script>
import H3Tooltip from '@/components/h3-tooltip/';
import H3Button from '@/components/h3-button/';

export default {
  name: 'Tooltip',
  components: {
    H3Tooltip,
    H3Button,
  },
  data () {
    return {
      content: `内容内容内容内容内容内容内容内容内容内容内容
      内容内容内容内容内容内容内容内容内容内容内容内容内容内容
      内容内容内容`,
    };
  },
};
</script>

<style lang="less" scoped>
.pop-item {
  height: 100px;
  line-height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.top,
.bottom {
  text-align: center;
}
.center {
  width: 250px;
  margin: 10px auto;
  overflow: hidden;
}
.center-left {
  float: left;
}
.center-right {
  float: right;
}
</style>

API

参数	说明	类型	默认值
mask	是否显示遮罩层	boolean	false
visible	是否显示，v-model绑定值	boolean	false
placement	位置，可选值：top left right bottom top-start top-end bottom-start bottom-end bottom-start bottom-end left-start left-end right-start right-end	string	bottom
type	气泡类型 default primary warning error success	string	default
maskCls	mask蒙层自定义class	string	无
wrapCls	wrap弹窗内容区域的自定义class	string	无
getRenderContainer	把组件挂载某个地方,函数请返回节点,字符串默认通过document.querySelector查找	Function=> Node / String	document.body
offset	气泡弹出后偏移量, 一般用来进行气泡偏移调整	number	0
disabled	是否禁用	boolean	false
width	内容宽度，在文本显示宽度不固定时需要设置，避免错位	string|number	-
always	是否一直呈现	boolean	false
control	是否由父组件控制显示隐藏，默认是在触发气泡组件上添加点击事件，触发	boolean	false

Slot

属性	说明	参数
default	触发气泡的组件	-
content	气泡内容插槽	-

Event

事件名	说明	参数
toggle	切换显示时触发，v-model绑定事件	value
show	显示时回调	-
hide	关闭时回调	-