diff --git a/resources/js/Global/components/Inputs/AutoCompleteWrapper.vue b/resources/js/Global/components/Inputs/AutoCompleteWrapper.vue
new file mode 100644
index 0000000..c2a685f
--- /dev/null
+++ b/resources/js/Global/components/Inputs/AutoCompleteWrapper.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <slot :filter="filter"> </slot>
+  </div>
+</template>
+
+<script>
+let cancelId;
+
+export default {
+  name: "AutoCompleteWrapper",
+  props: {
+    callback: {
+      type: Function,
+    },
+  },
+  methods: {
+    filter(e) {
+      clearTimeout(cancelId);
+      if (
+        e.target.value &&
+        e.target.value.length > 1 &&
+        e.code !== "Tab" &&
+        e.code !== "Enter"
+      ) {
+        cancelId = setTimeout(() => {
+          this.callback(e.target.value);
+        }, 400);
+      }
+    },
+  },
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/resources/js/Global/components/Inputs/Code-Editor.vue b/resources/js/Global/components/Inputs/Code-Editor.vue
index b7fad66..f650d89 100644
--- a/resources/js/Global/components/Inputs/Code-Editor.vue
+++ b/resources/js/Global/components/Inputs/Code-Editor.vue
@@ -1,53 +1,70 @@
 <template>
-    <prism-editor class="my-editor LTR height-300 " v-model="code" :highlight="highlighter" line-numbers></prism-editor>
+  <prism-editor
+    class="my-editor LTR height-300"
+    v-model="code"
+    :highlight="highlighter"
+    line-numbers
+  ></prism-editor>
 </template>
 
 <script>
-    // import Prism Editor
-    import { PrismEditor } from 'vue-prism-editor';
-    import 'vue-prism-editor/dist/prismeditor.min.css'; // import the styles somewhere
+// import Prism Editor
+import { PrismEditor } from "vue-prism-editor";
+import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
 
-    // import highlighting library (you can use any library you want just return html string)
-    import { highlight, languages } from 'prismjs/components/prism-core';
-    import 'prismjs/components/prism-clike';
-    import 'prismjs/components/prism-javascript';
-    import 'prismjs/themes/prism-tomorrow.css'; // import syntax highlighting styles
+// import highlighting library (you can use any library you want just return html string)
+import { highlight, languages } from "prismjs/components/prism-core";
+import "prismjs/components/prism-clike";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-css";
+import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
 
-    export default {
-        components: {
-            PrismEditor,
-        },
-        data: () => ({ code: 'console.log("Hello World")' }),
-        methods: {
-            highlighter(code) {
-                return highlight(code, languages.js); // languages.<insert language> to return html with markup
-            },
-        },
-    };
+export default {
+  components: {
+    PrismEditor,
+  },
+  props: ["value", "language"],
+  data: () => ({}),
+  methods: {
+    highlighter(code) {
+      return highlight(code, languages[this.language]); // languages.<insert language> to return html with markup
+    },
+  },
+  computed: {
+    code: {
+      get() {
+        return this.value;
+      },
+      set(e) {
+        this.$emit("input", e);
+      },
+    },
+  },
+};
 </script>
 
 <style>
-    .height-300 {
-        height: 300px;
-    }
-    /* required class */
-    .my-editor {
-        /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
-        background: #f5f2f0;
-        border: 1px solid #dcdcdc;
-        border-left: 10px solid #dcdcdc;
-        color: #5a6268;
-        border-radius: 5px;
+.height-300 {
+  height: 300px;
+}
+/* required class */
+.my-editor {
+  /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
+  background: #f5f2f0;
+  border: 1px solid #dcdcdc;
+  border-left: 10px solid #dcdcdc;
+  color: #5a6268;
+  border-radius: 5px;
 
-        /* you must provide font-family font-size line-height. Example: */
-        font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
-        font-size: 14px;
-        line-height: 1.5;
-        padding: 5px;
-    }
+  /* you must provide font-family font-size line-height. Example: */
+  font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  padding: 5px;
+}
 
-    /* optional class for removing the outline */
-    .prism-editor__textarea:focus {
-        outline: none;
-    }
+/* optional class for removing the outline */
+.prism-editor__textarea:focus {
+  outline: none;
+}
 </style>
diff --git a/resources/js/Global/components/Inputs/TooltipButton.vue b/resources/js/Global/components/Inputs/TooltipButton.vue
new file mode 100644
index 0000000..e373c08
--- /dev/null
+++ b/resources/js/Global/components/Inputs/TooltipButton.vue
@@ -0,0 +1,106 @@
+<template>
+  <v-tooltip
+    :top="top"
+    :bottom="bottom"
+    :left="left"
+    :right="right"
+    :color="tooltipColor"
+    :transition="transition"
+  >
+    <template v-slot:activator="{ on }">
+      <v-btn
+        slot="activator"
+        fab
+        :color="buttonColor"
+        :dark="dark"
+        :light="light"
+        v-on="on"
+        @click="$emit('click')"
+        :small="small"
+        :large="large"
+        :x-large="xLarge"
+        :x-small="xSmall"
+      >
+        <v-icon dark>{{ icon }}</v-icon>
+      </v-btn>
+    </template>
+    <span>{{ text }}</span>
+  </v-tooltip>
+</template>
+
+<script>
+export default {
+  name: "tooltipButton",
+  props: {
+    icon: {
+      type: String,
+      default: "WMi-user",
+    },
+    buttonColor: {
+      type: String,
+      default: "black",
+    },
+    text: {
+      type: String,
+      default: "متن پیش فرض",
+    },
+    tooltipColor: {
+      type: String,
+      default: "black",
+    },
+    top: {
+      type: Boolean,
+      default: function () {
+        return !this.bottom && !this.left && !this.right ? true : false;
+      },
+    },
+    bottom: {
+      type: Boolean,
+      default: false,
+    },
+    left: {
+      type: Boolean,
+      default: false,
+    },
+    right: {
+      type: Boolean,
+      default: false,
+    },
+    transition: {
+      type: String,
+      default: "fade-transition",
+    },
+    dark: {
+      type: Boolean,
+      default: function () {
+        return !this.light ? true : false;
+      },
+    },
+    light: {
+      type: Boolean,
+      default: false,
+    },
+    small: {
+      type: Boolean,
+      default: function () {
+        return !this.large && !this.xSmall && !this.xLarge ? true : false;
+      },
+    },
+    large: {
+      type: Boolean,
+      default: false,
+    },
+    xSmall: {
+      type: Boolean,
+      default: false,
+    },
+    xLarge: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/resources/js/Global/plugins/globalComponent.js b/resources/js/Global/plugins/globalComponent.js
index 898fc05..2ca4e14 100644
--- a/resources/js/Global/plugins/globalComponent.js
+++ b/resources/js/Global/plugins/globalComponent.js
@@ -1,8 +1,8 @@
-import Vue from 'vue';
+import Vue from "vue";
 
 // global Styles
 
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";//for tree select
+import "@riophae/vue-treeselect/dist/vue-treeselect.css"; //for tree select
 import "@Global/scss/style.scss";
 
 // global Components
@@ -86,11 +86,11 @@ Vue.component("we-hint-text", HintText);
 import HintBlock from "@Global/components/Blocks/Hint.vue";
 Vue.component("hint-block", HintBlock);
 
-import PersianDate from '@Global/components/Inputs/PersianDate'
+import PersianDate from "@Global/components/Inputs/PersianDate";
 Vue.component("we-persian-date", PersianDate);
 
-
-
+import TooltipButton from "@Global/components/Inputs/TooltipButton";
+Vue.component("tooltip-button", TooltipButton);
 
 Vue.component("wm-breadcrumbs", Breadcrumbs);
 Vue.component("wm-dialog", Dialog);
@@ -99,14 +99,13 @@ Vue.component("wm-helper", Helper);
 Vue.component("we-no-items", NoItems);
 Vue.component("we-loading", Loading);
 
-
 //setTime
 import store from "@Global/store/index";
-store.dispatch('common/setCurrentTime');
+store.dispatch("common/setCurrentTime");
 
 //jalali => 0.6MB
-import jalaliMoment from "vue-jalali-moment"
-import momment from "moment"
+import jalaliMoment from "vue-jalali-moment";
+import momment from "moment";
 import Wireframe from "@Global/components/Blocks/Wireframe";
-momment.locale('fa');
+momment.locale("fa");
 Vue.use(jalaliMoment);