Fixes #10 bug with binding element classes and styles

Author: adamdehaven

dist/vue-custom-tooltip.cjs.js

@@ -64,8 +64,9 @@ var script = vue.defineComponent({
         };
         vue.onMounted(setCssVars);
         return function () { return [
-            vue.h(props.abbreviation ? 'abbr' : 'span', Object.assign({}, attrs, {
+            vue.h(props.abbreviation ? 'abbr' : 'span', {
                 'class': [
+                    attrs.class,
                     props.position,
                     // force at least medium size if multiline is true
                     props.multiline && props.size === 'is-small' ? 'is-medium' : props.size,
@@ -78,8 +79,8 @@ var script = vue.defineComponent({
                 'data-label': props.label,
                 'aria-label': props.label,
                 'role': 'tooltip',
-                'style': [{ cursor: props.abbreviation ? 'help' : 'pointer' }],
-            }), slots) ]; };
+                'style': [{ cursor: props.abbreviation ? 'help' : 'pointer' }, attrs.style],
+            }, slots) ]; };
     },
 });
 

dist/vue-custom-tooltip.esm.js

@@ -60,8 +60,9 @@ var script = defineComponent({
         };
         onMounted(setCssVars);
         return function () { return [
-            h(props.abbreviation ? 'abbr' : 'span', Object.assign({}, attrs, {
+            h(props.abbreviation ? 'abbr' : 'span', {
                 'class': [
+                    attrs.class,
                     props.position,
                     // force at least medium size if multiline is true
                     props.multiline && props.size === 'is-small' ? 'is-medium' : props.size,
@@ -74,8 +75,8 @@ var script = defineComponent({
                 'data-label': props.label,
                 'aria-label': props.label,
                 'role': 'tooltip',
-                'style': [{ cursor: props.abbreviation ? 'help' : 'pointer' }],
-            }), slots) ]; };
+                'style': [{ cursor: props.abbreviation ? 'help' : 'pointer' }, attrs.style],
+            }, slots) ]; };
     },
 });
 

dist/vue-custom-tooltip.min.js

@@ -1,6 +1,6 @@
 {
   "name": "@adamdehaven/vue-custom-tooltip",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "A customizable, reusable, and reactive tooltip component for Vue 3 (including TypeScript) projects.",
   "keywords": [
     "Vue",

package.json

@@ -2,7 +2,9 @@
   <p>This is the Vue app.</p>
   <p>
     This sentence has a
-    <vue-custom-tooltip label="This is a tooltip" abbreviation>tooltip in the middle</vue-custom-tooltip>.
+    <vue-custom-tooltip class="adam-test" label="This is a tooltip" abbreviation
+      >tooltip in the middle</vue-custom-tooltip
+    >.
   </p>
 </template>
 

src/App.vue

@@ -69,8 +69,9 @@ export default defineComponent({
     return () => [
       h(
         props.abbreviation ? 'abbr' : 'span',
-        Object.assign({}, attrs, {
+        {
           'class': [
+            attrs.class,
             props.position,
             // force at least medium size if multiline is true
             props.multiline && props.size === 'is-small' ? 'is-medium' : props.size,
@@ -84,8 +85,8 @@ export default defineComponent({
           'data-label': props.label,
           'aria-label': props.label,
           'role': 'tooltip',
-          'style': [{ cursor: props.abbreviation ? 'help' : 'pointer' }],
-        }),
+          'style': [{ cursor: props.abbreviation ? 'help' : 'pointer' }, attrs.style],
+        },
         slots,
       ),
     ]