文字提示 Tooltip

鼠标 hover 时的提示信息

示例代码

<template>
  <div class="es-tooltip_content">
    <es-tooltip
      :tooltip="'左悬浮提示'"
      position="left"
      color="red"
      backgroundColor="green"
    >
      <es-button>左悬浮提示</es-button>
    </es-tooltip>
    <es-tooltip :tooltip="'上悬浮提示'" position="top">
      <es-button>上悬浮提示</es-button>
    </es-tooltip>
    <es-tooltip :tooltip="'下悬浮提示'" position="bottom">
      <es-button>下悬浮提示</es-button>
    </es-tooltip>
    <es-tooltip :tooltip="'右悬浮提示'" position="right">
      <es-button>右悬浮提示</es-button>
    </es-tooltip>
  </div>
</template>

<style scoped>
.es-tooltip_content {
  height: 400px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
</style>

Attributes

属性名	说明	类型	默认值
maxWidth	最大宽度	number	120
position	提示框位置	string	top
tooltip	提示文本	string	暂无提示
fontSize	提示文本字体大小	number	14
color	提示文本字体颜色	string	#FFF
backgroundColor	提示框背景颜色	string	rgba(0, 0, 0, .85)