diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte
index e908467f..efdd5ee0 100644
--- a/packages/demo/src/App.svelte
+++ b/packages/demo/src/App.svelte
@@ -1,37 +1,39 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  /*import '../../../dist/alert.wc.js'; */
-  /*import '../../../dist/confirm.wc.js'*/
-  /*import '../../../dist/async-table.wc.js';*/
-  /*import '../../../dist/input.wc.js';
-  /*import '../../../dist/quill.wc.js';*/
-  import '../../../dist/autocomplete.wc.js';
-  import '../../../dist/checkbox.wc.js';
-  /*import '../../../dist/progress-spinner.wc.js'*/
-  import '../../../dist/chips.wc.js';
-  import '../../../dist/datepicker.wc.js';
-  import '../../../dist/multiselect.wc.js';
-  import '../../../dist/select.wc.js';
-  import '../../../dist/accordion.wc.js';
-  import '../../../dist/bellow.wc.js';
-  import '../../../dist/radio.wc.js'
-  import '../../../dist/json-editor.wc.js'
-  import '../../../dist/code-editor.wc.js'
-  /*import '../../../dist/image-gallery.wc.js'
-  import '../../../dist/image-upload.wc.js'
-  import '../../../dist/paginator.wc.js'*/
-  import '../../../dist/table.wc.js'
-  import '../../../dist/textarea.wc.js';
-  import '../../../dist/button.wc.js'
-  import '../../../dist/link.wc.js'
-  import '../../../dist/tabs.wc.js'
-  import '../../../dist/slider.wc.js'
-  import '../../../dist/stepper.wc.js';
-  import '../../../dist/tree.wc.js';
+  // import '../../../dist/alert.wc.js';
+  // /*import '../../../dist/confirm.wc.js'*/
+  // /*import '../../../dist/async-table.wc.js';*/
+  // /*import '../../../dist/input.wc.js';
+  // /*import '../../../dist/quill.wc.js';*/
+  // import '../../../dist/autocomplete.wc.js';
+  // import '../../../dist/checkbox.wc.js';
+  // /*import '../../../dist/progress-spinner.wc.js'*/
+  // import '../../../dist/chips.wc.js';
+  // import '../../../dist/datepicker.wc.js';
+  // import '../../../dist/multiselect.wc.js';
+  // import '../../../dist/select.wc.js';
+  // import '../../../dist/accordion.wc.js';
+  // import '../../../dist/bellow.wc.js';
+  // import '../../../dist/radio.wc.js'
+  // import '../../../dist/json-editor.wc.js'
+  // import '../../../dist/code-editor.wc.js'
+  // /*import '../../../dist/image-gallery.wc.js'
+  // import '../../../dist/image-upload.wc.js'
+  // import '../../../dist/paginator.wc.js'*/
+  // import '../../../dist/table.wc.js'
+  // import '../../../dist/textarea.wc.js';
+  // import '../../../dist/button.wc.js'
+  // import '../../../dist/link.wc.js'
+  // import '../../../dist/tabs.wc.js'
+  // import '../../../dist/slider.wc.js'
+  // import '../../../dist/stepper.wc.js';
+  // import '../../../dist/tree.wc.js';
   import { renderAlert } from '../../../dist/render-alert.js';
   import { renderConfirm } from '../../../dist/render-confirm.js';
   import { FirebaseTableService } from './firebase-table.service';
   import { MockImageService } from './mock-image.service..js';
+  import '../../../dist/buttonTooltipAttribute.wc.js'
+
 
   let el: HTMLDivElement;
   let formEl: HTMLFormElement;
@@ -365,3 +367,6 @@
   <jp-tab title="two">Content 2</jp-tab>
   <jp-tab title="three">Content 3</jp-tab>
 </jp-tabs>
+
+
+<jp-buttonTooltipAttribute></jp-buttonTooltipAttribute>
\ No newline at end of file
diff --git a/packages/lib/index.ts b/packages/lib/index.ts
index 17225090..605a85cb 100644
--- a/packages/lib/index.ts
+++ b/packages/lib/index.ts
@@ -32,4 +32,5 @@ export default () => {
   import('./src/tree/tree.wc.svelte')
   import('./src/tree/node.wc.svelte')
   import('./src/form-fields/slider.wc.svelte');
+  import('./src/form-fields/buttonTooltipAttribute.wc.svelte');
 };
diff --git a/packages/lib/src/button/button.wc.svelte b/packages/lib/src/button/button.wc.svelte
index ccf37749..8c4ef22a 100644
--- a/packages/lib/src/button/button.wc.svelte
+++ b/packages/lib/src/button/button.wc.svelte
@@ -12,15 +12,31 @@
     export let color: 'default' | 'primary' | 'accent' | 'warn' = 'default';
 
     export let type: 'button' | 'submit' = 'button';
+
+    export let tooltip: string = '';
+
+    let isTooltipVisible = false;
+
+    const handleMouseOver = () => {
+      isTooltipVisible = true;
+    };
+
+    const handleMouseOut = () => {
+      isTooltipVisible = false;
+    };
 </script>
 
-<button {disabled}
-        {type}
-        class="jp-button jp-{variant}-button {color}"
-        class:loading={loading}
-        on:click>
-    <slot />
-</button>
+<div class="custom-button" on:mouseover={handleMouseOver} on:mouseout={handleMouseOut}>
+    <button {disabled} {type} class="jp-button jp-{variant}-button {color}" class:loading={loading} on:click>
+        <slot />
+    </button>
+
+    {#if isTooltipVisible}
+        <div class="tooltip">
+            {@html tooltip}
+        </div>
+    {/if}
+</div>
 
 <style>
     @import 'packages/demo/src/app.postcss';
@@ -326,4 +342,25 @@
         background-color: var(--background-disabled);
         color: var(--disabled-color)
     }
+
+    .custom-button {
+        padding: 10px;
+        margin: 5px;
+        position: relative;
+    }
+
+    .tooltip {
+        display: block;
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        background-color: #333;
+        color: #fff;
+        padding: 8px;
+        border-radius: 4px;
+        white-space: nowrap;
+    }
 </style>
+
+
diff --git a/packages/lib/src/form-fields/buttonTooltipAttribute.wc.svelte b/packages/lib/src/form-fields/buttonTooltipAttribute.wc.svelte
new file mode 100644
index 00000000..58a2b99d
--- /dev/null
+++ b/packages/lib/src/form-fields/buttonTooltipAttribute.wc.svelte
@@ -0,0 +1,26 @@
+<svelte:options
+        customElement={{
+    tag: 'jp-buttonTooltipAttribute',
+    shadow: 'none',
+    extend: (customElementConstructor) => {
+      return class extends customElementConstructor {
+        static formAssociated = true;
+
+        constructor() {
+          super();
+          this.attachedInternals = this.attachInternals();
+        }
+      };
+    }
+  }}
+/>
+
+<script lang="ts">
+    export let tooltip = '';
+
+    if (tooltip) {
+        console.log('tooltip', tooltip);
+    }
+</script>
+
+<button class="delete-button" tooltip="Delete">Delete</button>
\ No newline at end of file