<template>
  <div>
		<h2>Tooltip Content</h2>
		<div style="padding:20px 140px">
			<span v-Tooltip="tipContent">Login to System</span>
		</div>
  </div>
</template>

<script>
import Vue from "vue";
export default {
  data() {
    return {
      tipContent: {
        component: Vue.extend({
          template: `
            <Panel :border="false" style="width:200px">
              <div style="padding:10px">
                <TextBox iconCls="icon-man" placeholder="Username" style="width:100%"></TextBox>
              </div>
              <div style="padding:10px">
                <PasswordBox placeholder="Password" style="width:100%"></PasswordBox>
              </div>
              <div style="text-align:center;padding:10px">
                <LinkButton>Login</LinkButton>
                <LinkButton>Cancel</LinkButton>
              </div>
            </Panel>
          `
        })
      }
    };
  }
};
</script>