<template>
  <div>
    <h1>Tooltip 文字提示</h1>
    <p class="fbg-text">常用于展示鼠标 hover 时的提示信息。</p>
    <h3 class="fbg-title">基础用法</h3>
    <demo :code="baseTooltipStr">
      <el-tooltip class="item" effect="dark" content="Left 提示文字" popper-class="popper-class" placement="left">
        <el-button>左</el-button>
      </el-tooltip>
    </demo>
    <h3 class="fbg-title">主题</h3>
    <demo :code="themeTooltipStr">
      <el-tooltip content="Top center" placement="top">
        <el-button>Dark</el-button>
      </el-tooltip>
      <el-tooltip content="Bottom center" placement="bottom" effect="light">
        <el-button>Light</el-button>
      </el-tooltip>
    </demo>
    <h3 class="fbg-title">自定义内容</h3>
    <demo :code="defineTooltipStr">
      <el-tooltip placement="top">
        <div slot="content">多行信息<br/>第二行信息</div>
        <el-button>Top center</el-button>
      </el-tooltip>
    </demo>
    <h3 class="fbg-title">高级扩展</h3>
    <demo :code="advancedTooltipStr">
      <el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom" effect="light">
        <el-button @click="disabled = !disabled">点击{{disabled ? '开启' : '关闭'}} tooltip 功能</el-button>
      </el-tooltip>
    </demo>
    <h3 class="fbg-title">属性</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>effect</td>
          <td>默认提供的主题</td>
          <td>String</td>
          <td>dark | light</td>
          <td>success</td>
        </tr>
        <tr>
          <td>content</td>
          <td>显示的内容，也可以通过 slot#content 传入 DOM</td>
          <td>String</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>disabled</td>
          <td>Tooltip 是否可用</td>
          <td>Boolean</td>
          <td>true|false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>offset</td>
          <td>出现位置的偏移量</td>
          <td>Number</td>
          <td>--</td>
          <td>0</td>
        </tr>
        <tr>
          <td>transition</td>
          <td>定义渐变动画</td>
          <td>String</td>
          <td>--</td>
          <td>el-fade-in-linear</td>
        </tr>
        <tr>
          <td>visible-arrow</td>
          <td>是否显示 Tooltip 箭头</td>
          <td>Boolean</td>
          <td>true|false</td>
          <td>true</td>
        </tr>
        <tr>
          <td>open-delay</td>
          <td>延迟出现，单位毫秒</td>
          <td>Number</td>
          <td>--</td>
          <td>0</td>
        </tr>
        <tr>
          <td>manual</td>
          <td>手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效</td>
          <td>Boolean</td>
          <td>true|false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>popper-class</td>
          <td>为 Tooltip 的 popper 添加类名</td>
          <td>String</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>enterable</td>
          <td>鼠标是否可进入到 tooltip 中</td>
          <td>Boolean</td>
          <td>--</td>
          <td>true</td>
        </tr>
        <tr>
          <td>hide-after</td>
          <td>Tooltip 出现后自动隐藏延时，单位毫秒，为 0 则不会自动隐藏</td>
          <td>number</td>
          <td>--</td>
          <td>0</td>
        </tr>
        <tr>
          <td>tabindex</td>
          <td>Tooltip 组件的 tabindex</td>
          <td>number</td>
          <td>--</td>
          <td>0</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import hljs from '../util/highlight';
export default {
  data() {
    return {
      data: '',
      disabled: false,
      baseTooltipStr: `
      <el-tooltip class="item" effect="dark" content="Left 提示文字" popper-class="popper-class" placement="left">
        <el-button>左</el-button>
      </el-tooltip>
      <style>
      .popper-class {
        box-shadow: 0px 0px 8px #000!important;
      }
      </style>
      `,
      themeTooltipStr: `
      <el-tooltip content="Top center" placement="top">
        <el-button>Dark</el-button>
      </el-tooltip>
      <el-tooltip content="Bottom center" placement="bottom" effect="light">
        <el-button>Light</el-button>
      </el-tooltip>
      `,
      defineTooltipStr: `
      <el-tooltip placement="top">
        <div slot="content">多行信息<br/>第二行信息</div>
        <el-button>Top center</el-button>
      </el-tooltip>
      `,
      advancedTooltipStr: `
      <el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom" effect="light">
        <el-button @click="disabled = !disabled">点击{{disabled ? '开启' : '关闭'}} tooltip 功能</el-button>
      </el-tooltip>
      <script>
      export default {
        data() {
          return {
            disabled: true
          };
        }
      }
      <\/script>
      `
    }
  },
  mounted() {
    hljs.highlightCode();
  },
  methods: {

  }
}
</script>
<style lang="scss">
.marigin-bottom10 {
  margin-bottom: 10px;
}
.popper-class {
  box-shadow: 0px 0px 8px #000!important;
}
</style>