# v-title

> Tooltip text for Vue.

Latest version **2.1.8** (published 2024-05-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install v-title
pnpm add v-title
yarn add v-title
bun add v-title
```

## Health

**Score 30/100 (F)** — status: abandoned.

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

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.8 |
| Published | 2024-05-29 |
| First published | 2019-12-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 18.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | yujinpan |
| Maintainers | yujinpan |

## Links

- npm: https://www.npmjs.com/package/v-title
- Repository: https://github.com/yujinpan/v-title
- Homepage: https://github.com/yujinpan/v-title#readme
- Issues: https://github.com/yujinpan/v-title/issues
- npm.io page: https://npm.io/package/v-title

## Dependencies (4)

- [core-js](https://npm.io/package/core-js.md) ^3.x
- [tippy.js](https://npm.io/package/tippy.js.md) ^6.x
- [style-inject](https://npm.io/package/style-inject.md) ^0.x
- [vue-component-pluggable](https://npm.io/package/vue-component-pluggable.md) ^1.0.2

## Recent versions

- 2.1.8 (latest) — 2024-05-29
- 2.1.7 — 2024-05-29
- 2.1.6 — 2023-11-13
- 2.1.5 — 2023-10-31
- 2.1.4 — 2023-10-31
- 2.1.3 — 2023-10-31
- 2.1.2 — 2023-10-31
- 2.1.1 — 2023-10-31
- 2.1.0 — 2023-10-30
- 2.0.1 — 2022-01-20
- 1.0.13 — 2020-12-07
- 1.0.12 — 2020-12-07
- 1.0.11 — 2020-09-27
- 1.0.10 — 2020-09-12
- 1.0.9 — 2020-05-29
- … 9 more at https://npm.io/package/v-title/versions

## README

# v-title

Tooltip text for Vue.

Online Examples: https://yujinpan.github.io/v-title

> Now new version 2.0 is released, removed required packages `element-ui` and `tooltip.js`,
> tooltip.js has been deprecated, and the new version `tippy.js` added more features,
> so `v-title` removed many dom handles.

## Usage

### Install

```
npm install --save v-title
```

### Global registration

```js
import Vue from 'vue';
import VTitle from 'v-title';

Vue.use(VTitle);
```

### In-component registration

```js
import VTitle from 'v-title';

export default {
  directives: {
    VTitle
  }
};
```

### Options

#### Modifies

- delay: show delay
- light: use light effect, default: translucent
- overflow: use overflow mode
- multiple: use multiple line mode(**need set element's `line-height > offsetHeight`**)

#### Attributes

- title-placement: `String` placement top/right/bottom/left(-start, -end), default: top
- title-delay-time: `Number` show delay time, default: '200'
- title-max-width: `Number` tooltip max width, default: none

### Complete example

```vue
<template>
  <p v-title="title">hover me!</p>

  <!-- modify: light -->
  <p v-title.light="title">hover me!</p>

  <!-- modify: delay -->
  <p v-title.delay="title">hover me!</p>

  <!-- attr: title-delay-time -->
  <p v-title.delay="title" title-delay-time="1000">hover me!</p>

  <!-- attr: title-max-width -->
  <p v-title="title" title-max-width="100">hover me!</p>

  <!-- modify: overflow -->
  <p v-title.overflow="title">hover me!</p>

  <!-- modify: overflow.multiple -->
  <p v-title.overflow.multiple="title">hover me!</p>

  <!-- attr: title-placement -->
  <p v-title="title" title-placement="bottom">
    top(-start, -end), right(-start, -end), bottom(-start, -end),
    left(-start, -end)，default: top
  </p>
</template>

<script>
import VTitle from 'v-title';

export default {
  directives: {
    VTitle
  },
  data() {
    return {
      title: 'ABCDEFGABCDEFGABCDEFGABCDEFGABCDEFGABCDEFG',
    };
  }
};
</script>

<style lang="scss">
// custom className
.tippy-content {
  font-size: 20px;
}
</style>
```

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