@wishbone-media/spark 0.40.0 → 0.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.40.0",
+  "version": "0.41.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/assets/css/spark-tooltip.css

@@ -22,6 +22,20 @@
   white-space: pre-line;
 }
 
+/* Interactive tooltips: allow hovering/clicking inside the tooltip */
+.spark-tooltip-interactive {
+  pointer-events: auto;
+}
+
+.spark-tooltip-interactive a {
+  color: #93c5fd; /* blue-300 */
+  text-decoration: underline;
+}
+
+.spark-tooltip-interactive a:hover {
+  color: #bfdbfe; /* blue-200 */
+}
+
 .spark-tooltip-arrow {
   position: absolute;
   width: 8px;
@@ -30,21 +44,17 @@
   transform: rotate(45deg);
 }
 
-/* Transitions (for SparkTooltip component) */
+/* Transitions (for SparkTooltip component) — opacity only to avoid
+   conflicting with @floating-ui's transform: translate() positioning */
 .spark-tooltip-enter-active {
-  transition:
-    opacity 150ms ease,
-    transform 150ms ease;
+  transition: opacity 150ms ease;
 }
 
 .spark-tooltip-leave-active {
-  transition:
-    opacity 100ms ease,
-    transform 100ms ease;
+  transition: opacity 100ms ease;
 }
 
 .spark-tooltip-enter-from,
 .spark-tooltip-leave-to {
   opacity: 0;
-  transform: scale(0.95);
 }

package/src/components/SparkTooltip.vue

@@ -3,9 +3,9 @@
     ref="referenceRef"
     class="inline-flex"
     @mouseenter="show"
-    @mouseleave="hide"
+    @mouseleave="startHide"
     @focusin="show"
-    @focusout="hide"
+    @focusout="startHide"
   >
     <slot />
   </div>
@@ -16,8 +16,10 @@
         v-if="isVisible"
         ref="floatingRef"
         :style="floatingStyles"
-        class="spark-tooltip"
+        :class="['spark-tooltip', { 'spark-tooltip-interactive': interactive }]"
         role="tooltip"
+        @mouseenter="onTooltipMouseenter"
+        @mouseleave="onTooltipMouseleave"
       >
         <slot name="content">
           <!-- eslint-disable-next-line vue/no-v-html -- html prop is opt-in, consumer responsibility -->
@@ -36,7 +38,8 @@
  * Wraps a trigger element (default slot) and displays a floating tooltip on hover/focus.
  *
  * For simple text tooltips, prefer the v-spark-tooltip directive.
- * Use this component when you need slot-based HTML content or complex tooltip layouts.
+ * Use this component when you need slot-based HTML content, interactive tooltips
+ * with clickable links, or complex tooltip layouts.
  */
 import { ref, computed, useSlots, onUnmounted } from 'vue'
 import {
@@ -84,6 +87,11 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  /** Allow hovering over the tooltip content (for clickable links, buttons, etc.) */
+  interactive: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const slots = useSlots()
@@ -96,6 +104,12 @@ const isVisible = ref(false)
 let showTimeout = null
 let hideTimeout = null
 
+const hideDelay = computed(() => {
+  if (props.interactive)
+    return typeof props.delay === 'number' ? 150 : Math.max(props.delay.hide ?? 0, 150)
+  return typeof props.delay === 'number' ? 0 : (props.delay.hide ?? 0)
+})
+
 const middleware = computed(() => {
   const mw = [offsetMiddleware(props.offset), flip(), shift({ padding: 8 })]
   if (props.showArrow) {
@@ -139,12 +153,23 @@ function show() {
   }, delay)
 }
 
-function hide() {
+function startHide() {
   clearTimeout(showTimeout)
-  const delay = typeof props.delay === 'number' ? 0 : (props.delay.hide ?? 0)
   hideTimeout = setTimeout(() => {
     isVisible.value = false
-  }, delay)
+  }, hideDelay.value)
+}
+
+function onTooltipMouseenter() {
+  if (props.interactive) {
+    clearTimeout(hideTimeout)
+  }
+}
+
+function onTooltipMouseleave() {
+  if (props.interactive) {
+    startHide()
+  }
 }
 
 onUnmounted(() => {

package/src/directives/sparkTooltip.js

@@ -24,13 +24,16 @@ function normalizeConfig(value) {
     html: false,
     delay: { show: 200, hide: 0 },
     arrow: true,
+    interactive: false,
     ...value,
   }
 }
 
 function createTooltipElement(config) {
   const tooltip = document.createElement('div')
-  tooltip.className = TOOLTIP_CLASS
+  tooltip.className = config.interactive
+    ? `${TOOLTIP_CLASS} spark-tooltip-interactive`
+    : TOOLTIP_CLASS
   tooltip.setAttribute('role', 'tooltip')
 
   if (config.html) {
@@ -103,6 +106,16 @@ function showTooltip(el) {
     document.body.appendChild(tooltip)
     state.tooltipEl = tooltip
 
+    // Interactive: keep tooltip visible while hovering over it
+    if (state.config.interactive) {
+      tooltip.addEventListener('mouseenter', () => {
+        clearTimeout(state.hideTimeout)
+      })
+      tooltip.addEventListener('mouseleave', () => {
+        hideTooltip(el)
+      })
+    }
+
     updatePosition(el, tooltip, state.config)
   }, delay)
 }
@@ -113,7 +126,9 @@ function hideTooltip(el) {
 
   clearTimeout(state.showTimeout)
 
-  const delay = typeof state.config.delay === 'number' ? 0 : (state.config.delay?.hide ?? 0)
+  let delay = typeof state.config.delay === 'number' ? 0 : (state.config.delay?.hide ?? 0)
+  // Interactive tooltips need minimum delay so user can move mouse to the tooltip
+  if (state.config.interactive) delay = Math.max(delay, 150)
 
   state.hideTimeout = setTimeout(() => {
     if (state.tooltipEl) {