# ts-tooltip

> tooltip package

Latest version **1.0.6** (published 2025-04-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install ts-tooltip
pnpm add ts-tooltip
yarn add ts-tooltip
bun add ts-tooltip
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2025-04-05 |
| First published | 2025-04-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 43.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Saturn |
| Maintainers | saturn |
| Keywords | tooltip, ts-tooltip, vue-tooltip, vue3-tooltip |

## Links

- npm: https://www.npmjs.com/package/ts-tooltip
- Homepage: https://github.com/vmto
- npm.io page: https://npm.io/package/ts-tooltip

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^3.5.13
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21
- [classnames](https://npm.io/package/classnames.md) ^2.5.1
- [@popperjs/core](https://npm.io/package/@popperjs/core.md) ^2.11.8

## Recent versions

- 1.0.6 (latest) — 2025-04-05
- 1.0.5 — 2025-04-05
- 1.0.4 — 2025-04-05
- 1.0.3 — 2025-04-05
- 1.0.2 — 2025-04-05
- 1.0.1 — 2025-04-05
- 1.0.0 — 2025-04-05

## README

# ts-tooltip

> Development based on webstorm2023 and volar plugin

## Install

````
pnpm add ts-tooltip
````

## Preview
![color](img/demo.png)

## Example

````base
# main.js

// code...

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

app.use(tooltip);
````

````base
<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>
````

---
_Source: https://npm.io/package/ts-tooltip · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._