vue-element-table-tooltip v0.4.0

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

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

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

or

yarn add vue-element-table-tooltip

how to use

Import it in main.js, and configure the theme option. If theme is not provided, dark is default.

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

Vue.use(elementTableTooltip, {
  theme: "dark", // dark | light
});

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

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.

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

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

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

It should work.