Tooltips 文字提示

文字提示框类似于 HTML 的 title 属性，当鼠标悬浮在元素上方时，会出现一个文字提示框

基本用法

鼠标悬停时，文字提示框默认显示在顶上的位置

<at-tooltip placement="top" content="提示信息">
  <at-button>按钮</at-button>
</at-tooltip>
<at-tooltip content="提示信息"><span>一段文字</span></at-tooltip>

自定义文字提示的内容

可通过 slot="content" 的方式设置文字提示的内容

<at-tooltip>
  <span>文字提示</span>
  <template slot="content">
    <p>文字1</p>
    <p>文字2</p>
  </template>
</at-tooltip>

不同的展示方向

placement 属性可设置文字提示框出现的位置，默认提供9种不同的方向

<div class="show-box">
  <div class="top row col-md-16 flex-center">
    <at-tooltip class="item" content="Top Left 提示文字" placement="top-left"><at-button>上左</at-button></at-tooltip>
    <at-tooltip class="item" content="Top 提示文字" placement="top"><at-button>上边</at-button></at-tooltip>
    <at-tooltip class="item" content="Top Right 提示文字" placement="top-right"><at-button>上右</at-button></at-tooltip>
  </div>
  <div class="center row col-md-16 flex-between">
    <div class="left col-md-4">
      <at-tooltip class="item" content="Left Top 提示文字" placement="left-top"><at-button>左上</at-button></at-tooltip>
      <at-tooltip class="item" content="Left 提示文字" placement="left"><at-button>左边</at-button></at-tooltip>
      <at-tooltip class="item" content="Left Bottom 提示文字" placement="left-bottom"><at-button>左下</at-button></at-tooltip>
    </div>
    <div class="right col-md-4">
      <at-tooltip class="item" content="Right Top 提示文字" placement="right-top"><at-button>右上</at-button></at-tooltip>
      <at-tooltip class="item" content="Right 提示文字" placement="right"><at-button>右边</at-button></at-tooltip>
      <at-tooltip class="item" content="Right Bottom 提示文字" placement="right-bottom"><at-button>右下</at-button></at-tooltip>
    </div>
  </div>
  <div class="bottom row col-md-16 flex-center">
    <at-tooltip class="item" content="Bottom Left 提示文字" placement="bottom-left"><at-button>下左</at-button></at-tooltip>
    <at-tooltip class="item" content="Bottom 提示文字" placement="bottom"><at-button>下边</at-button></at-tooltip>
    <at-tooltip class="item" content="Bottom Right 提示文字" placement="bottom-right"><at-button>下右</at-button></at-tooltip>
  </div>
</div>

Tooltip 参数