# vue-element-table-tooltip

> A vue directive for element-ui to fix the problem which overflow table content cannot be copied.

Latest version **0.8.0** (published 2024-11-19) · 0 weekly downloads

## Install

```sh
npm install vue-element-table-tooltip
pnpm add vue-element-table-tooltip
yarn add vue-element-table-tooltip
bun add vue-element-table-tooltip
```

## Health

**Score 20/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.8.0 |
| Published | 2024-11-19 |
| First published | 2024-02-19 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 18.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Jeayesun |
| Maintainers | chiawiansup |
| Keywords | vue, element-ui, table, overflow, show-overflow-tooltip, copy, mouseenter |

## Links

- npm: https://www.npmjs.com/package/vue-element-table-tooltip
- Repository: https://github.com/Jeayesun/vue-element-table-tooltip
- Homepage: https://github.com/Jeayesun/vue-element-table-tooltip#readme
- Issues: https://github.com/Jeayesun/vue-element-table-tooltip/issues
- npm.io page: https://npm.io/package/vue-element-table-tooltip

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [element-ui](https://npm.io/package/element-ui.md) ^2.15.14

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.8.0 (latest) — 2024-11-19
- 0.7.0 — 2024-10-30
- 0.6.0 — 2024-06-29
- 0.5.0 — 2024-06-17
- 0.4.0 — 2024-02-19

## README

English | [中文](./README-zh.md)

# vue-element-table-tooltip

A vue directive for element-ui to fix this issue: [[Bug Report] el-table component adds show-overflow-tooltip, and text in tooltip cannot be copied by mouse selection](https://github.com/ElemeFE/element/issues/13916)

Since there is no plan to support copying overflow content in element-ui table components, and this requirement does exist, we could solve it with vue directive api.

# install

```bash
npm install --save vue-element-table-tooltip
```

or

```bash
yarn add vue-element-table-tooltip
```

## how to use

Import it in `main.js`, and configure the theme and the directive name. If theme is not provided, dark is default. If directive name if not provided, `element-table-tooltip` is default.

```js
import elementTableTooltip from "vue-element-table-tooltip";

Vue.use(elementTableTooltip, {
  theme: "dark", // dark | light
  name: "element-table-tooltip",
});
```

If you wanna use it in `.vue` partially, import and register it.

```js
import { darkTooltip, lightTooltip } from 'vue-element-table-tooltip'

export default {
	...
	directives: {
    "element-table-tooltip": darkTooltip,
  },
  ...
}
```

And then replace `show-overflow-tooltip` attribute with `v-element-table-tooltip` directive at `el-table-column` component where you wanna show overflow tooltips.

```html
<el-table-column
  label="overflow"
  prop="column2"
  v-element-table-tooltip
></el-table-column>
```

If you wanna disable tooltip，it goes like this:

```html
<el-table-column
  label="overflow"
  prop="column2"
  v-element-table-tooltip="false"
></el-table-column>
```

In addition, theme parameter is supported. It will ignore theme option which defined before.

```html
<el-table-column
  label="overflow"
  prop="column2"
  v-element-table-tooltip:dark
></el-table-column>
<el-table-column
  label="overflow"
  prop="column2"
  v-element-table-tooltip:light
></el-table-column>
```

Happy coding.

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