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"
    @mouseenter="showTip"
    @mouseleave="hiddenTip">
    工具函数调用
  </button>
  <button class="b2"
    @mouseenter="showTip"
    @mouseleave="hiddenTip">
    工具函数调用
  </button>
  <button class="b3"
    @mouseenter="showTip"
    @mouseleave="hiddenTip">
    工具函数调用
  </button>
  <button class="b4"
    @mouseenter="showTip"
    @mouseleave="hiddenTip">
    工具函数调用
  </button>
  <button class="b5"
    @mouseenter="showTip"
    @mouseleave="hiddenTip">
    工具函数调用
  </button>
  <button class="b6"
    @mouseenter="showTip"
    @mouseleave="hiddenTip">
    工具函数调用
  </button>
  <button class="b7"
    @mouseenter="showTip"
    @mouseleave="hiddenTip">
    工具函数调用
  </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%);
}

Babel + JSX

Vue.prototype.$tip = ToolTip.tip

// 这里是一个自定义的组件
const SomeCpt = {
  props: {
    msg: {
      type: String,
      default: ''
    },
    
    formater: {
    	type: Function,
      default: function () {
      	return function (v) { return v }
      }
    }
  },

  render: function render (h) {
    return h('span', {
      style: { color: '#42b983'}
    }, this.formater(this.msg))
  }
}

new Vue({
  el: '#app',
  
  data: function () {
  	this.tipInstance = null
    return {
    	msg: '这里是内容',
    	options: null
    }
  },
  
  
  methods: {
  	formater: function formater (v) {
    	return v + '😂'
    },
    
  	showTip: function showTip (event) {
    	this.tipInstance = this.$tip({
        theme: 'dark',
        width: '300px',
        title: '标题',
        // 参考元素
        target: event.target,
        // 显示内容
        content: this.msg,
        // tip 展示的优先级
        placementQueue: ['top', 'right', 'bottom', 'left'],
        // 自定义渲染用，可以是一个 render 函数，也可以是一个组件
        contentComponent: SomeCpt,
        // 传入自定义组件 props
        contentProps: {
        	msg: '这里是是通过 props 传入的信息',
          formater: this.formater
        }
      })
    },
    
    hiddenTip: function hiddenTip () {
    	if (this.tipInstance) {
      	this.tipInstance.hiddentip()
      }
    }
  }
})