Tooltip 消息提示 #

<template>
  <div class="flex">
    <k-tooltip content="消息提示">
      <k-button>消息提示</k-button>
    </k-tooltip>
    <k-tooltip>
      <k-button>插槽提示</k-button>
      <template #content>
        插槽消息提示
      </template>
    </k-tooltip>
    <k-tooltip>
      <span class="text-overflow">超出显示省略号超出显示省略号超出显示省略号超出显示省略号超出显示省略号超出显示省略号</span>
      <template #content>
        超出显示省略号超出显示省略号超出显示省略号超出显示省略号超出显示省略号超出显示省略号
      </template>
    </k-tooltip>
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>

<template>
  <div class="flex">
    <k-tooltip content="dark 主题">
      <k-button>dark 主题</k-button>
    </k-tooltip>
    <k-tooltip effect="light">
      <k-button>light 主题</k-button>
      <template #content>
        light 主题
      </template>
    </k-tooltip>
    <k-tooltip content="custom 主题" effect="customized">
      <k-button>custom 主题</k-button>
    </k-tooltip>
  </div>
</template>

<script setup>

</script>

<style>
.el-popper.is-customized {
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159 229 151), rgb(204 229 129));
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}
</style>

<template>
  <div class="flex">
    <k-tooltip content="消息提示显示图标" show-icon placement="right">
      显示图标
    </k-tooltip>
    <k-tooltip content="消息提示显示图标" show-icon placement="right">
      <k-button>插槽图标提示</k-button>
      <template #icon>
        <el-icon><InfoFilled /></el-icon>
      </template>
    </k-tooltip>
  </div>
</template>

<script setup>
import { InfoFilled } from '@element-plus/icons-vue';
</script>

<style lang="scss" scoped>

</style>