:::demo 代码示例

```html
<template>
    <div>
        <div>
            <button>hover弹层</button>
            <button style="margin-left:100px">hover弹层</button>
            <button style="margin-left:100px">hover弹层</button>
            <br/>
            <button>hover弹层</button>
            <br/>
            <button>hover弹层</button>
            <br/>
            <h1>register弹层1:<span class="register-test1" style="background-color: greenyellow">trigger 1</span></h1>
            <h1>register弹层2:<span class="register-test2" style="background-color: greenyellow">trigger 2</span></h1>
        </div>
        <div style="margin-top:50px">
            <p>
                已经把弹层方法挂到全局所以可以通过this.$hoverTip方法调用
                步骤如下：
            </p>
            <p>
                （1）首先生成弹层实例,弹出大小可配置，如下传递参数
                this.$hoverTip({width:500,height:400});
            </p>
            <p>
                （2）control参数必须为一个数组，为所选择触发显示弹层的节点集合
            </p>
            <p>
                （3）insideDom参数：将所需内容插入到弹层内部的方法：提供一个回调方便自定义内部内容，可以选择插入一个组件。
            </p>
            <p>
                （4）callback参数：提供一个回调插入到弹层显示之前调用。
            </p>
            <p>
                （5）style参数：可以为弹出层设置样式。
            </p>
            <p style="color:red">
                注意：如果要重新绑定触发元素，需要重新调用this.$hoverTip方法，但是并不会生成新的实例，只是修改弹层触发元素以及内容与样式等；
            </p>
            <p>
                小提示：该控件会根据target元素的位置来决定是在target上方或者下方显示；
            </p>
        </div>
        <div style="margin-top:20px">
            <p>********************************20171025 update***************************************************************</p>
            <pre class="hoverTip">
1）原调用方式this.$hoverTip(options)由于全局共享一个hoverTip实例，重复设置会导致options被覆盖，
   而且mouseover事件触发后，想要修改弹层内容十分不便
   (可以根据callback的参数来区分当前触发的dom节点，再调用this.$hoverTip(options)修改)，
   但实际应用中可能会需要根据不同的dom显示不同的弹层内容。
2）本次更新添加新方法this.$hoverTip.register(dom,options)，可以为单个的dom节点配置弹层内容，
   使options内容只对传入的dom生效。
3）需要注意的是这种方式本质上是在dom的mouseover事件中更新hoverTip的options，
   所以通过this.$hoverTip(options)的方式绑定的control也会受到影响，
   可以在此页面上方的button和trigger上测试看看。
            </pre>
        </div>
    </div>
</template>
<style>
    pre.hoverTip{
        font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
        font-size: 15px;
    }
</style>

<script>
    export default{
        name: "Tip",
        methods: {
            hoverHandler(){
                this.$hoverTip({
                    width: 400,
                    height: 400,
                    insideDom: function (h) {
                        return h('div', {
                            style: {
                                lineHeight: '400px',
                                textAlign: 'center'
                            }
                        }, 'hover 弹层')
                    },
                    callback: function () {

                    },
                    control: document.querySelectorAll('button'),
                    style: {
                        border: "1px solid blue",
                        background: 'red',
                        color: 'white'
                    },//除了宽高以外的样式
                });
            },
        },
        mounted(){
            this.$hoverTip.register(this.$el.querySelector(".register-test1"),{
                width:100,
                height:100,
                insideDom:function(h){
                    let empty=h("div",{style:"margin: auto;width:60px;height: "+this.height+"px;"},[h("div",{style:"display:table-cell; vertical-align:middle;height: inherit;"},"暂无数据")]);
                    return h('div', {class:"echart-target",style:"width:"+this.width+"px;height:"+this.height+"px"}, [empty]);
                },
                onShow:function(e){

                },
                style: {
                    border: "1px solid blue",
                    background: 'white'
                }
            });
            this.$hoverTip.register(this.$el.querySelector(".register-test2"),{
                width:100,
                height:100,
                insideDom:function(h){
                    return h('div', {class:"echart-target",style:"width:"+this.width+"px;height:"+this.height+"px"}, ["test2"]);
                },
                onShow:function(e){

                },
                style: {
                    border: "1px solid blue",
                    background: 'white'
                }
            });
            this.hoverHandler();
        }
    }
</script>
```

:::
<anchor id="api" label="API" h4 ></anchor>
### hoverTip options
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| width | 宽度,required | number | — | — |
| height | 高度,required | number |  —  |  —  |
| insideDom | 弹层内容,参数h为vue的createElement方法,required | function |  —  |  —  |
| callback | 弹层显示之前调用,required | function |  —  |  —  |
| style | 弹层样式 | Object |  —  |  —  |
| control | 触发弹层元素，仅$hoverTip方式支持 | Array |  —  |  —  |
| onShow | 弹层显示之后(Vue.nextTick)调用,仅register方式支持 | function |  —  |  —  |