@diabolic/pointy 1.0.3 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diabolic/pointy",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "type": "module",
   "description": "A lightweight, dependency-free JavaScript library for creating animated tooltips with a pointing cursor. Perfect for product tours, onboarding flows, and feature highlights.",
   "main": "dist/pointy.js",

package/src/pointy.js

@@ -20,6 +20,7 @@
  * - steps {Array<{target, content, direction?, duration?}>} - Tour steps
  * - target {string|HTMLElement} - Initial target element
  * - content {string|string[]} - Initial content/messages (single-step use)
+ * - zIndex {number} - CSS z-index for the container (default: 9999)
  * - offsetX {number} - Horizontal offset from target (default: 20)
  * - offsetY {number} - Vertical offset from target (default: 16)
  * - trackingFps {number} - Position update FPS, 0 = unlimited (default: 60)
@@ -74,8 +75,8 @@
  * - introAnimationEnd: Initial fade-in animation completed
  * 
  * Content:
- * - messagesSet: Messages array replaced via setMessages()
- * - messageUpdate: Single message updated via setMessage()
+ * - messagesSet: Messages array replaced via setMessages() or setMessage()
+ * - currentMessageUpdate: Current message updated via setCurrentMessage()
  * - messageChange: Message changed (navigation or auto-cycle)
  * 
  * Message Cycle:
@@ -127,7 +128,7 @@
  * Core: show(), hide(), destroy()
  * Navigation: next(), prev(), goToStep(index), reset(), restart()
  * Custom Target: pointTo(target, content?, direction?)
- * Content: setMessages(content), setMessage(msg), nextMessage(), prevMessage(), goToMessage(index)
+ * Content: setMessages(content), setMessage(msg), setCurrentMessage(msg), nextMessage(), prevMessage(), goToMessage(index)
  * Message Cycle: startMessageCycle(interval?), stopMessageCycle(), pauseMessageCycle(), resumeMessageCycle()
  * Autoplay: startAutoplay(), stopAutoplay(), pauseAutoplay(), resumeAutoplay()
  * Animation: animateToInitialPosition()
@@ -136,8 +137,8 @@
  * 
  * Setters (all emit change events):
  * setEasing(), setAnimationDuration(), setIntroFadeDuration(), setBubbleFadeDuration(),
- * setMessageInterval(), setMessageTransitionDuration(), setOffset(), setResetOnComplete(),
- * setFloatingAnimation(), setInitialPosition(), setInitialPositionOffset(),
+ * setMessageInterval(), setMessageTransitionDuration(), setOffset(), setZIndex(),
+ * setResetOnComplete(), setFloatingAnimation(), setInitialPosition(), setInitialPositionOffset(),
  * setAutoplay(), setAutoplayWaitForMessages()
  * 
  * Static Helpers:
@@ -243,7 +244,6 @@ class Pointy {
 
     .${cn.container} {
       position: absolute;
-      z-index: 9999;
       font-family: 'Circular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       --${vp}-duration: 1000ms;
       --${vp}-easing: cubic-bezier(0, 0.55, 0.45, 1);
@@ -435,6 +435,7 @@ class Pointy {
     Pointy.injectStyles(this.classNames, this.cssVarPrefix);
 
     this.steps = options.steps || [];
+    this.zIndex = options.zIndex !== undefined ? options.zIndex : 9999; // CSS z-index
     this.offsetX = options.offsetX !== undefined ? options.offsetX : 20;
     this.offsetY = options.offsetY !== undefined ? options.offsetY : 16;
     this.tracking = options.tracking !== undefined ? options.tracking : true; // Enable/disable position tracking
@@ -487,6 +488,7 @@ class Pointy {
     // Create DOM elements - pointer is the anchor, bubble positioned relative to it
     this.container = document.createElement('div');
     this.container.className = `${this.classNames.container} ${this.classNames.hidden}`;
+    this.container.style.zIndex = this.zIndex;
     this.container.style.setProperty(`--${this.cssVarPrefix}-duration`, `${this.animationDuration}ms`);
     this.container.style.setProperty(`--${this.cssVarPrefix}-easing`, this._resolveEasing(this.easing));
     this.container.style.setProperty(`--${this.cssVarPrefix}-bubble-fade`, `${this.bubbleFadeDuration}ms`);
@@ -1306,11 +1308,11 @@ class Pointy {
   }
 
   /**
-   * Set/update the current message (at current index)
+   * Update the message at current index only (does not replace all messages)
    * @param {string} message - New message content
    * @param {boolean} animate - Whether to animate the change (default: true)
    */
-  setMessage(message, animate = true) {
+  setCurrentMessage(message, animate = true) {
     const oldMessage = this.currentMessages[this.currentMessageIndex];
     this.currentMessages[this.currentMessageIndex] = message;
     
@@ -1321,7 +1323,7 @@ class Pointy {
       this.updatePosition();
     }
     
-    this._emit('messageUpdate', {
+    this._emit('currentMessageUpdate', {
       index: this.currentMessageIndex,
       message: message,
       oldMessage: oldMessage,
@@ -1330,6 +1332,15 @@ class Pointy {
     });
   }
 
+  /**
+   * Set a single message (replaces all messages with one)
+   * @param {string} message - Message content
+   * @param {boolean} animate - Whether to animate the change (default: true)
+   */
+  setMessage(message, animate = true) {
+    this.setMessages(message, animate);
+  }
+
   /**
    * Set messages programmatically (replaces current messages)
    * @param {string|string[]} content - Single message or array of messages
@@ -1392,6 +1403,19 @@ class Pointy {
     this._emit('targetChange', { from: oldTarget, to: this.targetElement });
   }
 
+  /**
+   * Set the z-index of the container
+   * @param {number} zIndex - CSS z-index value
+   */
+  setZIndex(zIndex) {
+    const oldValue = this.zIndex;
+    if (oldValue === zIndex) return;
+    
+    this.zIndex = zIndex;
+    this.container.style.zIndex = zIndex;
+    this._emit('zIndexChange', { from: oldValue, to: zIndex });
+  }
+
   setOffset(offsetX, offsetY) {
     const oldOffsetX = this.offsetX;
     const oldOffsetY = this.offsetY;