toolpop - npm Package Compare versions

Comparing version 0.4.5 to 0.4.6

package.json

 {
   "name": "toolpop",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "type": "module",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

README.md

@@ -5,24 +5,6 @@ # 💬 Toolpop
 
-### ✨🎨✨ **NEW!** You can now fully customize the tooltip's appearance!
+✨🎨 **Fully customizable** tooltip appearance with extensive styling options!
 
-> [!CAUTION]
-> 
-> 🚨 Breaking change 🚨
->
-> The method for manually registering the ✒️ directive has changed. You now need to import and call `createPop()`.
->
-> ```diff
-> // main.ts
-> - import { pop } from 'toolpop'
-> - app.directive('pop', pop)
->
-> + import { createPop } from 'toolpop'
-> + app.directive('pop', createPop())
-> ```
-If you 🧩 Use as Plugin, you are ok - no change.
+[DEMO](https://toolpop.jsonkody.cz) | [Live Demo on StackBlitz](https://stackblitz.com/github/JsonKody/toolpop_demo?file=src%2FApp.vue)
 
-[DEMO](https://toolpop.jsonkody.cz)
-
-[Live Demo on StackBlitz](https://stackblitz.com/github/JsonKody/toolpop_demo?file=src%2FApp.vue)
-
 ```html
@@ -74,3 +56,2 @@ <p v-pop="'Simple tooltip'">Hover me</p>
 // ...
-// main.ts
 app.use(Toolpop, {
@@ -107,3 +88,3 @@ fontSize: 14,
 ```ts
-app.directive('gandalf', pop)
+app.directive('gandalf', createPop())
 ```
@@ -117,2 +98,20 @@
 
+## ⚙️ Props & Modifiers
+
+**Props** (placement):
+- `:top`, `:right`, `:bottom`, `:left` – tooltip placement (`:top` is default, so you can omit it)
+
+**Modifiers**:
+- `.html` – interpret value as raw HTML (e.g. images or rich markup)
+- `.click` – shows the tooltip on click instead of hover
+- `.leave` – hides the tooltip on mouseleave (only useful with `.click`)
+
+Example combining prop and modifier:
+
+```html
+<button v-pop:right.click="'Click me!'">Right-side click tooltip</button>
+```
+
+---
+
 ## ✏️ Options
@@ -138,3 +137,2 @@
 
-
 ```ts
@@ -156,17 +154,4 @@ import { createPop, type PopOptions } from 'toolpop'
 
-## ⚙️ Modifiers
-
-- `top`, `right`, `bottom`, `left` – tooltip placement (`top` is default, so you can omit it)
-- `html` – interpret value as raw HTML (e.g. images or rich markup)
-- `click` – shows the tooltip on click instead of hover
-  - `leave` – hides the tooltip on mouseleave (only useful with `.click`)
-
----
-
 ## 💡 Example
 
-[DEMO](https://toolpop.jsonkody.cz)
-
-[Live Demo on StackBlitz](https://stackblitz.com/github/JsonKody/toolpop_demo?file=src%2FApp.vue)
-
 Simple static text:
@@ -199,3 +184,3 @@
 <!-- Click-activated tooltip that hides on mouseleave -->
-<button v-pop.click.leave="'Click tooltip'">Click me</button>
+<button v-pop:right.click.leave="'Click tooltip'">Click me</button>
 ```
@@ -226,2 +211,2 @@
 
-[MIT](https://github.com/jsonkody/toolpop/blob/main/LICENSE) © 2025 [JsonKody](https://github.com/jsonkody)
+[MIT](https://github.com/jsonkody/toolpop/blob/main/LICENSE) © 2025 [JsonKody](https://github.com/jsonkody)

No alert changes

Worsened metrics

Total package byte prevSize

14703

-2.29%

Number of lines in readme file

204

-7.27%

No dependency changes