JSFiddle - React, Tailwind, and code Playground

by nlush

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="https://npm.elemecdn.com/dt-ui@0.0.13/lib/tool-tip.js"></script>
<div id="app">
  <button class="b1" v-tip="options">指令调用</button>
  <button class="b2" v-tip="options">指令调用</button>
  <button class="b3" v-tip="options">指令调用</button>
  <button class="b4" v-tip="options">指令调用</button>
  <button class="b5" v-tip.dark.top.bottom="msg">指令调用</button>
  <button class="b6" v-tip.dark.right.left="msg">指令调用</button>
  <button class="b7" v-tip.dark.bottom="msg">指令调用</button>
</div>

CSS

@import url("https://npm.elemecdn.com/dt-ui@0.0.13/lib/theme/index.css");

* {
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
  width: 100%;
}

body {
  position: relative;
}

button {
  padding: 6px 8px;
  position: absolute;
}

.b1 {
  top: 0;
  left: 0;
}

.b2 {
  top: 0;
  right: 0;
}

.b3 {
  bottom: 0;
  left: 0;
}

.b4 {
  bottom: 0;
  right: 0;
}

.b5 {
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.b6 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.b7 {
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JavaScript

Vue.use(ToolTip.directive)
new Vue({
  el: '#app',
  
  data: function () {
    return {
    	msg: '这里是内容',
    	options: null
    }
  },
  
  mounted: function () {
  	this.options = {
    	theme: 'dark',
    	title: '标题',
      content: this.msg,
      placementQueue: ['top', 'right', 'bottom', 'left'],
      contentComponent: function (h) {
      	return h('span', {
          style: { color: '#42b983' }
        }, '这里是自定义渲染的内容')
      }
    }
  }
})