ts-tooltip

ts-tooltip

Development based on webstorm2023 and volar plugin

Install

pnpm add ts-tooltip

Preview

Example

# main.js

// code...

import tooltip from 'ts-tooltip';
import 'ts-tooltip/dist/index.css';

app.use(tooltip);

<script setup lang="ts">
function onChange(show: boolean) {
  console.log('组件是否展示:', show)
}

function clickOutside(outside: boolean) {
  console.log('组件外发生点击:', outside)
}
</script>

<template>
  <div class="demo">
    <tooltip
      content="向上展示"
      @on-change="onChange"
    >
      <button>默认配置</button>
    </tooltip>
    
    <tooltip
      content="插槽优先级高"
      trigger="click"
      placement="bottom"
      @click-outside="clickOutside"
    >
      <button>嵌套扩展</button>
      <template #content>
        <ul class="selector">
          <li>请选择</li>
          <li>北京</li>
          <li>天津</li>
          <li>上海</li>
          <li>重庆</li>
        </ul>
      </template>
    </tooltip>
  </div>
</template>