refactor: Small refactoring Tooltip component

docs/components/tooltip/examples/TooltipExample.vue

@@ -1,8 +1,10 @@
 <template>
   <Tooltip>
     <template #trigger>
-      <button type="button"
-            class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+      <button
+          type="button"
+          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+      >
           Default Tooltip
       </button>
     </template>
@@ -14,4 +16,4 @@
 
 <script setup>
   import { Tooltip } from '../../../../src/index'
-</script>
+</script>

docs/components/tooltip/examples/TooltipPositionExample.vue

@@ -3,9 +3,11 @@
     <!-- Show tooltip on top -->
     <Tooltip placement="top">
       <template #trigger>
-        <button type="button"
-              class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
-            Tooltip top
+        <button
+          type="button"
+          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+        >
+          Tooltip top
         </button>
       </template>
       <template #content>
@@ -15,9 +17,11 @@
     <!-- Show tooltip on right -->
     <Tooltip placement="right">
       <template #trigger>
-        <button type="button"
-              class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
-              Tooltip right
+        <button
+          type="button"
+          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+        >
+          Tooltip right
         </button>
       </template>
       <template #content>
@@ -27,9 +31,11 @@
     <!-- Show tooltip on bottom -->
     <Tooltip placement="bottom">
       <template #trigger>
-        <button type="button"
-              class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
-              Tooltip bottom
+        <button
+          type="button"
+          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+        >
+          Tooltip bottom
         </button>
       </template>
       <template #content>
@@ -39,9 +45,11 @@
     <!-- Show tooltip on left -->
     <Tooltip placement="left">
       <template #trigger>
-        <button type="button"
-              class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
-              Tooltip left
+        <button
+          type="button"
+          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+        >
+          Tooltip left
         </button>
       </template>
       <template #content>
@@ -53,4 +61,4 @@
 
 <script setup>
   import { Tooltip } from '../../../../src/index'
-</script>
+</script>

docs/components/tooltip/examples/TooltipStyleExample.vue

@@ -1,11 +1,13 @@
 <template>
   <div class="flex flex-wrap justify-center py-8 space-x-3">
     <!-- light style tooltip -->
-    <Tooltip tooltip-style="tooltip-light">
+    <Tooltip theme="light">
       <template #trigger>
-        <button type="button"
-              class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
-            Light Tooltip
+        <button
+          type="button"
+          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+        >
+          Light Tooltip
         </button>
       </template>
       <template #content>
@@ -13,11 +15,13 @@
       </template>
     </Tooltip>
     <!-- dark style tooltip -->
-    <Tooltip tooltip-style="tooltip-dark">
+    <Tooltip theme="dark">
       <template #trigger>
-        <button type="button"
-              class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
-              Dark Tooltip
+        <button
+          type="button"
+          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+        >
+          Dark Tooltip
         </button>
       </template>
       <template #content>
@@ -29,4 +33,4 @@
 
 <script setup>
   import { Tooltip } from '../../../../src/index'
-</script>
+</script>

docs/components/tooltip/examples/TooltipTriggerExample.vue

@@ -3,9 +3,11 @@
     <!-- Show tooltip on hover -->
     <Tooltip trigger="hover">
       <template #trigger>
-        <button type="button"
-              class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
-            Tooltip hover
+        <button
+          type="button"
+          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+        >
+          Tooltip hover
         </button>
       </template>
       <template #content>
@@ -15,9 +17,11 @@
     <!-- Show tooltip on click -->
     <Tooltip trigger="click">
       <template #trigger>
-        <button type="button"
-              class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
-              Tooltip click
+        <button
+          type="button"
+          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+        >
+          Tooltip click
         </button>
       </template>
       <template #content>
@@ -35,11 +39,11 @@ import type { TooltipPlacement } from '../../../../src/components/Tooltip/types'
 const props = defineProps({
 placement: {
   type: String as PropType<TooltipPlacement>,
-  default: 'top'
+  default: 'top',
 },
 arrowColor: {
     type: String,
-    default: "#0f172a",
-}
+    default: '#0f172a',
+},
 })
 </script>