vue.js2 指令_vue.js易于使用且灵活的工具提示指令

vue.js2 指令

提示指令工具提示 (vue-directive-tooltip)

Vue.js tooltip directive. Easy to use, configure and style.

Vue.js工具提示指令。 易于使用，配置和样式。

Vue.js tooltip directive (based on Popper.js)

Vue.js工具提示指令(基于Popper.js)

View demo 查看演示 Download Source 下载源

用法 (Usage)

Super simple

超级简单

<span v-tooltip="'my text'">some text</span>

A lot of options make this tooltip convenient:

许多选项使此工具提示变得方便：

• content: simple text or use another html tag

  内容 ：简单文本或使用其他html标签

• positioning (right, left, ...)

  定位 (右，左，...)

• positioning variants: start | end. ex: bottom.end, top.start, right.end, etc...

  定位变量 ：开始| 结束。 例如：bottom.end，top.start，right.end等。

• delay to hide (in ms)

  延迟隐藏(以毫秒为单位)

• offset (from the target in px)

  偏移量 (距目标像素)

• choose from several triggers (hover, focus, click)

  从多个触发器中选择(悬停，聚焦，单击)

• full programmatic, you choose when to show/hide the tooltip

  完全程序化的 ，您可以选择何时显示/隐藏工具提示

• and of course, use your custom CSS class

  当然，请使用您的自定义CSS类

翻译自: https://vuejsexamples.com/easy-to-use-and-flexible-tooltip-directive-with-vue-js/

vue.js2 指令