Vue/React/Svelte - Add tooltipTrigger prop

Author: nolimits4web

src/phenome/components/button.jsx

@@ -54,6 +54,7 @@ export default {
     active: Boolean,
     disabled: Boolean,
     tooltip: String,
+    tooltipTrigger: String,
     ...Mixins.colorProps,
     ...Mixins.linkIconProps,
     ...Mixins.linkRouterProps,
@@ -225,6 +226,7 @@ export default {
         self.f7Tooltip = self.$f7.tooltip.create({
           targetEl: self.refs.el,
           text: newText,
+          trigger: self.props.tooltipTrigger,
         });
         return;
       }
@@ -239,7 +241,7 @@ export default {
     const self = this;
     const el = self.refs.el;
     el.addEventListener('click', self.onClick);
-    const { tooltip, routeProps } = self.props;
+    const { tooltip, tooltipTrigger, routeProps } = self.props;
     if (routeProps) {
       el.f7RouteProps = routeProps;
     }
@@ -248,6 +250,7 @@ export default {
       self.f7Tooltip = f7.tooltip.create({
         targetEl: el,
         text: tooltip,
+        trigger: tooltipTrigger,
       });
     });
   },

src/phenome/components/fab-button.jsx

@@ -19,6 +19,7 @@ export default {
     label: String,
     target: String,
     tooltip: String,
+    tooltipTrigger: String,
     ...Mixins.colorProps,
   },
   render() {
@@ -67,12 +68,13 @@ export default {
   componentDidMount() {
     const self = this;
     self.refs.el.addEventListener('click', self.onClick);
-    const { tooltip } = self.props;
+    const { tooltip, tooltipTrigger } = self.props;
     if (!tooltip) return;
     self.$f7ready((f7) => {
       self.f7Tooltip = f7.tooltip.create({
         targetEl: self.refs.el,
         text: tooltip,
+        trigger: tooltipTrigger,
       });
     });
   },
@@ -103,6 +105,7 @@ export default {
         self.f7Tooltip = self.$f7.tooltip.create({
           targetEl: self.refs.el,
           text: newText,
+          trigger: self.props.tooltipTrigger,
         });
         return;
       }

src/phenome/components/fab.jsx

@@ -24,6 +24,7 @@ export default {
       default: 'right-bottom',
     },
     tooltip: String,
+    tooltipTrigger: String,
     ...Mixins.colorProps,
   },
   render() {
@@ -117,6 +118,7 @@ export default {
         self.f7Tooltip = self.$f7.tooltip.create({
           targetEl: self.refs.el,
           text: newText,
+          trigger: self.props.tooltipTrigger,
         });
         return;
       }
@@ -132,12 +134,13 @@ export default {
     if (self.refs.linkEl) {
       self.refs.linkEl.addEventListener('click', self.onClick);
     }
-    const { tooltip } = self.props;
+    const { tooltip, tooltipTrigger } = self.props;
     if (!tooltip) return;
     self.$f7ready((f7) => {
       self.f7Tooltip = f7.tooltip.create({
         targetEl: self.refs.el,
         text: tooltip,
+        trigger: tooltipTrigger,
       });
     });
   },

src/phenome/components/icon.jsx

@@ -22,6 +22,7 @@ export default {
     aurora: String,
     md: String,
     tooltip: String,
+    tooltipTrigger: String,
     size: [String, Number],
     ...Mixins.colorProps,
   },
@@ -73,6 +74,7 @@ export default {
         self.f7Tooltip = self.$f7.tooltip.create({
           targetEl: self.refs.el,
           text: newText,
+          trigger: self.props.tooltipTrigger,
         });
         return;
       }
@@ -84,13 +86,14 @@ export default {
     const self = this;
     const el = self.refs.el;
     if (!el) return;
-    const { tooltip } = self.props;
+    const { tooltip, tooltipTrigger } = self.props;
     if (!tooltip) return;
 
     self.$f7ready((f7) => {
       self.f7Tooltip = f7.tooltip.create({
         targetEl: el,
         text: tooltip,
+        trigger: tooltipTrigger,
       });
     });
   },

src/phenome/components/link.jsx

@@ -36,6 +36,7 @@ export default {
     },
     target: String,
     tooltip: String,
+    tooltipTrigger: String,
 
     // Smart Select
     smartSelect: Boolean,
@@ -142,6 +143,7 @@ export default {
         self.f7Tooltip = self.$f7.tooltip.create({
           targetEl: self.refs.el,
           text: newText,
+          trigger: self.props.tooltipTrigger,
         });
         return;
       }
@@ -156,7 +158,7 @@ export default {
     const self = this;
     const el = self.refs.el;
     el.addEventListener('click', self.onClick);
-    const { tabbarLabel, tabLink, tooltip, smartSelect, smartSelectParams, routeProps } = self.props;
+    const { tabbarLabel, tabLink, tooltip, tooltipTrigger, smartSelect, smartSelectParams, routeProps } = self.props;
     let isTabbarLabel = false;
     if (tabbarLabel
       || (
@@ -182,6 +184,7 @@ export default {
         self.f7Tooltip = f7.tooltip.create({
           targetEl: el,
           text: tooltip,
+          trigger: tooltipTrigger,
         });
       }
     });

src/phenome/components/list-button.jsx

@@ -23,6 +23,7 @@ export default {
     href: [Boolean, String],
     target: String,
     tooltip: String,
+    tooltipTrigger: String,
     ...Mixins.colorProps,
     ...Mixins.linkRouterProps,
     ...Mixins.linkActionsProps,
@@ -101,6 +102,7 @@ export default {
         self.f7Tooltip = self.$f7.tooltip.create({
           targetEl: self.refs.el,
           text: newText,
+          trigger: self.props.tooltipTrigger,
         });
         return;
       }
@@ -114,7 +116,7 @@ export default {
   componentDidMount() {
     const self = this;
     const linkEl = self.refs.linkEl;
-    const { routeProps, tooltip } = self.props;
+    const { routeProps, tooltip, tooltipTrigger } = self.props;
     if (routeProps) {
       linkEl.f7RouteProps = routeProps;
     }
@@ -124,6 +126,7 @@ export default {
         self.f7Tooltip = f7.tooltip.create({
           targetEl: linkEl,
           text: tooltip,
+          trigger: tooltipTrigger,
         });
       }
     });

src/phenome/components/list-item.jsx

@@ -30,6 +30,7 @@ export default {
 
     // Tooltip
     tooltip: String,
+    tooltipTrigger: String,
 
     // Link Props
     link: [Boolean, String],
@@ -287,6 +288,7 @@ export default {
         self.f7Tooltip = self.$f7.tooltip.create({
           targetEl: self.refs.el,
           text: newText,
+          trigger: self.props.tooltipTrigger,
         });
         return;
       }
@@ -330,7 +332,7 @@ export default {
     const { el, linkEl } = self.refs;
     if (!el) return;
     const {
-      link, href, smartSelect, swipeout, swipeoutOpened, accordionItem, smartSelectParams, routeProps, tooltip,
+      link, href, smartSelect, swipeout, swipeoutOpened, accordionItem, smartSelectParams, routeProps, tooltip, tooltipTrigger,
     } = self.props;
     const needsEvents = !(link || href || accordionItem || smartSelect);
     if (!needsEvents && linkEl) {
@@ -385,6 +387,7 @@ export default {
         self.f7Tooltip = f7.tooltip.create({
           targetEl: el,
           text: tooltip,
+          trigger: tooltipTrigger,
         });
       }
     });

src/svelte/components/button.svelte

@@ -47,6 +47,7 @@
   export let active = false;
   export let disabled = false;
   export let tooltip = undefined;
+  export let tooltipTrigger = undefined;
 
   let el;
   let f7Tooltip;
@@ -122,6 +123,7 @@
       f7Tooltip = f7.instance.tooltip.create({
         targetEl: el,
         text: newText,
+        trigger: tooltipTrigger,
       });
       return;
     }
@@ -144,6 +146,7 @@
       f7Tooltip = f7.instance.tooltip.create({
         targetEl: el,
         text: tooltip,
+        trigger: tooltipTrigger,
       });
     });
   });

src/svelte/components/fab-button.svelte

@@ -16,6 +16,7 @@
   export let label = undefined;
   export let target = undefined;
   export let tooltip = undefined;
+  export let tooltipTrigger = undefined;
 
   let el;
   let f7Tooltip;
@@ -43,6 +44,7 @@
       f7Tooltip = f7.instance.tooltip.create({
         targetEl: el,
         text: newText,
+        trigger: tooltipTrigger,
       });
       return;
     }
@@ -62,6 +64,7 @@
         f7Tooltip = f7.instance.tooltip.create({
           targetEl: el,
           text: tooltip,
+          trigger: tooltipTrigger,
         });
       }
     });

src/svelte/components/fab.svelte

@@ -19,6 +19,7 @@
   export let text = undefined;
   export let position = 'right-bottom';
   export let tooltip = undefined;
+  export let tooltipTrigger = undefined;
   export let f7Slot = 'fixed';
 
   let el;
@@ -56,6 +57,7 @@
       f7Tooltip = f7.instance.tooltip.create({
         targetEl: linkEl,
         text: newText,
+        trigger: tooltipTrigger,
       });
       return;
     }
@@ -80,6 +82,7 @@
         f7Tooltip = f7.instance.tooltip.create({
           targetEl: linkEl,
           text: tooltip,
+          trigger: tooltipTrigger,
         });
       }
     });