@rocketui/vue 0.2.80 → 0.3.0-alpha.1

package/README.md

@@ -22,7 +22,12 @@ import App from './App.vue'
 // Import the Styles
 import '@rocketui/vue/dist/style.css'
 
-createApp(App).mount('#app')
+// Optional: Import and register directives globally
+import { vTooltip } from '@rocketui/vue/directives'
+
+const app = createApp(App)
+app.directive('tooltip', vTooltip)
+app.mount('#app')
 ```
 
 Then you can use the components in your `App.vue` file:
@@ -34,9 +39,50 @@ import { RButton } from '@rocketui/vue'
 
 <template>
   <RButton>Rocket UI Button</RButton>
+  
+  <!-- Or use directives (if registered globally) -->
+  <button v-tooltip="'Simple tooltip'">Hover me</button>
+  
+  <!-- With options -->
+  <button v-tooltip="{
+    text: 'Custom tooltip',
+    placement: 'right',
+    trigger: 'click'
+  }">Click me</button>
 </template>
 ```
 
+## Directives
+
+### Tooltip Directive
+
+The tooltip directive provides a quick way to add tooltips to any element:
+
+```vue
+<!-- Simple usage -->
+<button v-tooltip="'Tooltip text'">Hover me</button>
+
+<!-- With options -->
+<button v-tooltip="{
+  text: 'Tooltip with options',
+  placement: 'bottom',
+  trigger: 'click',
+  outsideClick: true,
+  dark: false
+}">Click me</button>
+```
+
+#### Available Options
+
+- **text**: Tooltip content (required)
+- **placement**: `'top'` | `'bottom'` | `'left'` | `'right'` (default: `'top'`)
+- **trigger**: `'hover'` | `'click'` (default: `'hover'`)
+- **delay**: Show delay in milliseconds (default: `0`)
+- **offset**: Distance from trigger element (default: `8`)
+- **dark**: Dark theme (default: `true`)
+- **disabled**: Disable tooltip (default: `false`)
+- **outsideClick**: Close on outside click for click trigger (default: `false`)
+
 ## Development
 
 ### Recommended IDE Setup