[2.1.4] Updated Styles + Add CodeSandBox

README.md

@@ -10,6 +10,8 @@
 </div>
 &nbsp;
 
+You can find a **CodeSandBox** containing the module, along with a demonstration of its functionality and the option to customize its styles, [by following this link](https://codesandbox.io/p/sandbox/vue3-tooltip-fsv9xl?file=%2Fsrc%2Fcomponents%2FTestComponent.vue%3A17%2C9-17%2C48&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cltklnak10006356iyt8wcwvd%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cltklnak10002356iretltoe2%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cltklnak10003356iyowpmbra%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cltklnak10005356irnq16azx%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cltklnak10002356iretltoe2%2522%253A%257B%2522id%2522%253A%2522cltklnak10002356iretltoe2%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522cltklnak10005356irnq16azx%2522%253A%257B%2522id%2522%253A%2522cltklnak10005356irnq16azx%2522%252C%2522activeTabId%2522%253A%2522cltklqkii004h356hnc0o0m3h%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522id%2522%253A%2522cltklqkii004h356hnc0o0m3h%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522cltklnak10003356iyowpmbra%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cltklnak10003356iyowpmbra%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D).
+
 ## Installation
 First, let's add a module to your project using **npm**:
 
@@ -75,10 +77,10 @@ To use a component you just need to register it in your template:
 ```vue
 <tooltip position="bottom">
     <template v-slot:text>
-      <p>Point at me and find out the secret</p>
+        <p>Point at me and find out the secret</p>
     </template>
     <template v-slot:tooltip>
-      <img src="https://picsum.photos/200" />
+        <strong>Watermelon is a berry</strong>
     </template>
 </tooltip>
 ```

dist/vue3-tooltip.es.js

@@ -36,7 +36,7 @@ const _ = {
     o[l] = n;
   return o;
 };
-function T(t, e, o, l, n, b) {
+function T(t, e, o, l, n, h) {
   return r(), s("div", {
     onMouseenter: e[0] || (e[0] = (u) => l.isShowTooltip = !0),
     onMouseleave: e[1] || (e[1] = (u) => l.isShowTooltip = !1),
@@ -59,7 +59,7 @@ function T(t, e, o, l, n, b) {
     }, 8, ["name", "onAfterEnter"])
   ], 34);
 }
-const S = /* @__PURE__ */ y(_, [["render", T], ["__scopeId", "data-v-69eec82b"]]), k = {
+const S = /* @__PURE__ */ y(_, [["render", T], ["__scopeId", "data-v-f73c658e"]]), k = {
   mounted: (t, e) => {
     c(t, e);
   },
@@ -71,12 +71,12 @@ const S = /* @__PURE__ */ y(_, [["render", T], ["__scopeId", "data-v-69eec82b"]]
   t.classList.add(o), !(e.value === null || e.value === void 0) && (t.dataset.tooltip = e.value, t.classList.toggle(`${o}__${C(e.modifiers)}`, !0), t.classList.toggle(`${o}__${e.arg || "bottom"}`, !0));
 }, C = (t) => t.primary ? "primary" : t.secondary ? "secondary" : t.accent ? "accent" : "primary", E = (t) => {
   t.component("tooltip", S), t.directive("tooltip", k);
-}, w = {
+}, $ = {
   install: E
 };
 export {
   S as TooltipComponent,
   k as TooltipDirective,
-  w as default,
+  $ as default,
   E as install
 };

package.json

@@ -2,7 +2,7 @@
   "name": "vue3-tooltip",
   "description": "Module for convenient work with tooltips in Vue3 (using a directive and a component)",
   "type": "module",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "private": false,
   "author": {
     "name": "Dmitry Luckyanenko",
@@ -44,6 +44,7 @@
   "bugs": {
     "url": "https://github.com/neluckoff/vue3-tooltip/issues"
   },
+  "homepage": "https://goo.su/YfII",
   "scripts": {
     "build": "vite build"
   },

src/assets/_directive.css

@@ -44,6 +44,10 @@
     opacity: 0;
 }
 
+.vue-tooltip:hover {
+    z-index: calc(var(--tooltip-d-z-index) + 1);
+  }
+
 /* Tooltip appears on hover */
 .vue-tooltip:hover::after {
     opacity: 1;

src/components/TooltipComponent.vue

@@ -68,6 +68,10 @@ export default {
   display: none;
 }
 
+.vue-tooltip:hover {
+  z-index: calc(var(--tooltip-c-z-index) + 1);
+}
+
 .vue-tooltip__pointer-event {
   pointer-events: none;
 }