Popper.js is a tooltip widget based on Vue that does not rely on popper.js and supports instruction registration and tool function use.

Project address: github.com/kinglisky/v…

Kinglisky.github. IO /vtip

Previous projects often encountered the need to display detailed information via tooltip, using the Element-UI tool-tip component and Popover popup window. It might look something like this:

Tooltip component:

<el-tooltip class="item" effect="dark" content="Top Left "placement="top-start"> <el-button> Top Left </el-button> </el-tooltip>Copy the code

Popover:

<el-popover ref="popover1" Placement ="top-start" title=" title "width="200" trigger="hover" Content =" This is a piece of content, this is a piece of content, this is a piece of content, this is a piece of content." > </el-button v-popover:popover1>hover activation </el-button>Copy the code

Even a simple tooltip tip can require a lot of writing per use, and generating a tooltip instance for a tooltip display can be a huge resource drain.

Most of the time our tooltip just shows copywriting tips, so I personally prefer to use vue directives like:

<button v-tip.top="' some instructions for executing an operation '"> execute </button>Copy the code

By using the command to bind a text prompt to a prompt, the mouse hover directly displays the content of the text above the target element, no longer need to explicitly write component instances like 👆.

Of course, sometimes you need to stuff custom display or interactive content into the tooltip, and directives can also provide some custom configurations:

<button v-tip="tipOptions"> execute </button>Copy the code
Computed: {tipOptions () {return {width: 'auto', theme: 'dark', transition: true, // customComponent customComponent: Music, // Component props customProps: {id}... Other configurations ****}}}Copy the code

In fact, this is what vTIP does, and vTIP provides a singleton implementation. When vitP is used, there is only one TIP singleton on the page, and no new instance is created for the tip content.

Small amway once, welcome to step on github.com/kinglisky/v…