# ToolTips 文字提示
常用于提示信息。

## 基础用法
在这里我们提供 6 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。
:::demo 使用`f-icon`嵌入图标
````html
<div class="box">
    <efly-tooltip  :content="'左提示左提示左提示左提示'" top="-1px" left="calc(-100% + 2px)" placement="left">
        <efly-button>左提示</efly-button>
    </efly-tooltip>
    <efly-tooltip :content="'上左提示'" top="-42px" left="-6px" placement="top-left">
        <efly-button>上左提示</efly-button>
    </efly-tooltip>
    <efly-tooltip :content="'上右提示'" top="-42px" left="10px" placement="top-right">
        <efly-button>上右提示</efly-button>
    </efly-tooltip>
    <efly-tooltip :content="'上提示'" top="-42px" left="1px" placement="top">
        <efly-button>上提示</efly-button>
    </efly-tooltip>
    <efly-tooltip :content="'下左提示'" top="40px" left="-6px" placement="bottom-left">
        <efly-button>下左提示</efly-button>
    </efly-tooltip>
    <efly-tooltip :content="'下右提示'" top="40px" left="10px" placement="bottom-right">
        <efly-button>下右提示</efly-button>
    </efly-tooltip>
    <efly-tooltip :content="'下提示'" top="40px" left="2px" placement="bottom">
        <efly-button>下提示</efly-button>
    </efly-tooltip>
    <efly-tooltip :content="'右提示'" top="-1px" left="calc(100% + 1px)" placement="right">
        <efly-button>右提示</efly-button>
    </efly-tooltip>
</div>

````
:::

## 事件触发
提示形式默认是通过hover事件进行触发，但是也可以通过定义show属性设置为true|false进行强制显示隐藏
:::demo 使用`f-icon`嵌入图标
````html
<div class="box">
    <efly-tooltip :content="'通过hover事件触发'" top="-1px" left="calc(100% + 1px)" placement="right">
        <efly-button>hover</efly-button>
    </efly-tooltip>
    <efly-tooltip trigger="click" :content="'通过click事件触发'" top="-1px" left="calc(100% + 1px)" placement="right">
        <efly-button>click</efly-button>
    </efly-tooltip>
    <efly-tooltip trigger="show" content="导出"  top="-1px" left="calc(100% + 1px)" placement="right">
        <efly-button>show</efly-button>
    </efly-tooltip>
    <efly-tooltip trigger="hide" content="" top="-1px" left="calc(100% + 1px)" placement="right">
        <efly-button>hide</efly-button>
    </efly-tooltip>
</div>
````
:::

## 主题
Tips 组件提供了两个不同的主题：primary和danger。
:::demo 使用`f-icon`嵌入图标
````html
<div class="box">
    <efly-tooltip content="primary" top="-1px" left="calc(100% + 1px)" placement="right">
        <efly-button>primary</efly-button>
    </efly-tooltip>
    <efly-tooltip content="danger" top="-1px" left="calc(100% + 1px)" placement="right" type="danger">
        <efly-button>danger</efly-button>
    </efly-tooltip>
    <efly-tooltip content="success" top="-1px" left="calc(100% + 1px)" placement="right" type="success">
        <efly-button>success</efly-button>
    </efly-tooltip>
    <efly-tooltip content="warning" top="-1px" left="calc(100% + 1px)" placement="right" type="warning">
        <efly-button>warning</efly-button>
    </efly-tooltip>
    <efly-tooltip content="info" top="-1px" left="calc(100% + 1px)" placement="right" type="info">
        <efly-button>info</efly-button>
    </efly-tooltip>
    <efly-tooltip content="white" top="-1px" left="calc(100% + 1px)" placement="right" type="white">
        <efly-button>white</efly-button>
    </efly-tooltip>
</div>
````
:::

## 定位方式
一般类型的提示都是悬浮的，但是也可以设置成非悬浮的提示。
:::demo 使用`f-icon`嵌入图标
````html
<div class="box">
    <efly-tooltip :content="'下左提示'" position="relative" top="34px" left="-86px" placement="bottom-left">
        <efly-button>下左提示</efly-button>
    </efly-tooltip>
</div>
````
:::

## 居中
一般类型的提示都是悬浮的，但是也可以设置成非悬浮的提示。
:::demo 使用`f-icon`嵌入图标
````html
<div class="box">
    <efly-tooltip top="-40px" align="center" placement="top">
        <efly-button>下左提示</efly-button>
            <div slot="content">
                11111111111111111111111111111111
            </div>
    </efly-tooltip>
</div>
````
:::

## 自定义Content
展示多行文本或者是设置文本内容的格式
:::demo 使用`f-icon`嵌入图标
````html
<div class="box">
    <efly-tooltip trigger="show" top="-12px" left="calc(100% + 2px)" placement="right">
        <div slot="content">
            <span>111</span>
            <p>2222</p>
        </div>
        <efly-button>primary</efly-button>
    </efly-tooltip>
</div>
````
:::

## 参数说明
|   参数     |   说明    | 类型      | 可选值       | 默认值   |
|---------  |-------- |---------- |-------------  |-------- |
|content    |内容     | String  |     —        |    —     |
|placement  |定位     | String  |  left/top-left/top/bottom-left/bottom/right  |    right    |
|top        |top定位  | String  |     —        |    —     |
|left       |left定位 | String  |     —        |   auto   |
|align      |水平定位  | String  |     auto/center        |   auto   |
|type       |类型     | String  |  primary/danger        |   primary   |
|trigger    |触发方式  | String  |  hover/click        |   hover   |
|position   |定位方式  | String  |  relative/absolute        |   absolute   |