tessl/npm-v-tooltip

Easy tooltips, popovers and dropdowns for Vue 2.x with Popper.js integration

—

Pending

Overview

Eval results

Files

Global Configuration

Name: tessl/npm-v-tooltip
Author: tessl

v-tooltip provides comprehensive global configuration options for customizing default behavior, styling, and functionality across all tooltip and popover instances.

Capabilities

Plugin Installation Options

Configure v-tooltip globally during Vue plugin installation.

/**
 * Install v-tooltip plugin with global options
 * @param Vue - Vue constructor
 * @param options - Global configuration options
 */
function install(Vue: any, options?: Partial<GlobalVTooltipOptions>): void;

// Plugin installation with options
Vue.use(VTooltip, options);

Usage Examples:

import Vue from 'vue';
import VTooltip from 'v-tooltip';

// Install with custom defaults
Vue.use(VTooltip, {
  defaultPlacement: 'bottom',
  defaultClass: 'my-tooltip-theme',
  defaultHtml: false, // Disable HTML for security
  defaultDelay: 200,
  autoHide: false,
  popover: {
    defaultTrigger: 'hover',
    defaultAutoHide: false
  }
});

// Or install with minimal config
Vue.use(VTooltip, {
  defaultClass: 'custom-tooltip'
});

Plugin Interface

The main VTooltip export provides a complete plugin interface.

interface VTooltipPlugin {
  /** Install function for Vue.use() */
  install(Vue: any, options?: Partial<GlobalVTooltipOptions>): void;
  
  /** Global enable/disable state */
  enabled: boolean;
  
  /** Current global configuration options */
  options: GlobalVTooltipOptions;
}

// Plugin exports
const VTooltip: VTooltipPlugin;
const VPopover: VueComponent;
const VClosePopover: DirectiveOptions;

Usage Examples:

import VTooltip, { VPopover, VClosePopover } from 'v-tooltip';

// Plugin properties
console.log(VTooltip.enabled); // true
console.log(VTooltip.options.defaultClass); // 'vue-tooltip-theme'

// Enable/disable globally
VTooltip.enabled = window.innerWidth > 768;

// Install plugin
Vue.use(VTooltip, { defaultClass: 'custom' });

Direct Options Configuration

Modify global options after plugin installation.

// Direct options access
VTooltip.options: GlobalVTooltipOptions;

// Modify individual options
VTooltip.options.defaultClass = 'new-theme';
VTooltip.options.defaultPlacement = 'top';
VTooltip.options.popover.defaultTrigger = 'click';

Usage Examples:

import VTooltip from 'v-tooltip';

// Change default theme
VTooltip.options.defaultClass = 'material-tooltip';

// Disable HTML content globally for security
VTooltip.options.defaultHtml = false;

// Set global delays
VTooltip.options.defaultDelay = { show: 300, hide: 100 };

// Configure popover defaults
VTooltip.options.popover.defaultPlacement = 'bottom-start';
VTooltip.options.popover.defaultAutoHide = true;

// Custom template
VTooltip.options.defaultTemplate = `
  <div class="custom-tooltip" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-content"></div>
  </div>
`;

Global Enable/Disable

Control tooltip functionality globally based on conditions.

// Global enable/disable property
VTooltip.enabled: boolean;

// Enable/disable based on conditions
VTooltip.enabled = condition;

Usage Examples:

import VTooltip from 'v-tooltip';

// Disable on mobile devices
VTooltip.enabled = window.innerWidth > 768;

// Disable during specific app states
VTooltip.enabled = !this.$store.state.isLoading;

// Toggle based on user preferences
VTooltip.enabled = this.$store.state.user.showTooltips;

// Responsive enable/disable
window.addEventListener('resize', () => {
  VTooltip.enabled = window.innerWidth > 768;
});

Tooltip Global Options

Core tooltip configuration options affecting directive behavior.

interface GlobalVTooltipOptions {
  /** Default tooltip placement relative to target element */
  defaultPlacement: 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 
                   'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 
                   'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
  
  /** Default CSS classes applied to the tooltip element */
  defaultClass: string;
  
  /** Default CSS classes applied to the target element of the tooltip */
  defaultTargetClass: string;
  
  /** Is the content HTML by default? */
  defaultHtml: boolean;
  
  /** Default HTML template of the tooltip element */
  defaultTemplate: string;
  
  /** Selector used to get the arrow element in the tooltip template */
  defaultArrowSelector: string;
  
  /** Selector used to get the inner content element in the tooltip template */
  defaultInnerSelector: string;
  
  /** Default delay in milliseconds or delay configuration object */
  defaultDelay: number | DelayConfig;
  
  /** Default events that trigger the tooltip */
  defaultTrigger: string;
  
  /** Default position offset in pixels */
  defaultOffset: number | string;
  
  /** Default container where the tooltip will be appended */
  defaultContainer: string | HTMLElement | false;
  
  /** Default boundaries element for positioning */
  defaultBoundariesElement: string | HTMLElement;
  
  /** Default Popper.js options */
  defaultPopperOptions: any;
  
  /** Class added when content is loading */
  defaultLoadingClass: string;
  
  /** Displayed when tooltip content is loading */
  defaultLoadingContent: string;
  
  /** Hide on mouseover tooltip */
  autoHide: boolean;
  
  /** Close tooltip on click on tooltip target? */
  defaultHideOnTargetClick: boolean;
  
  /** Auto destroy tooltip DOM nodes after specified milliseconds */
  disposeTimeout: number;
  
  /** Options specific to popovers */
  popover: Partial<GlobalVTooltipPopoverOptions>;
}

Configuration Examples:

Vue.use(VTooltip, {
  // Appearance
  defaultPlacement: 'top',
  defaultClass: 'vue-tooltip-theme dark-theme',
  defaultTargetClass: 'has-tooltip highlighted',
  
  // Content
  defaultHtml: false, // Security: disable HTML by default
  defaultTemplate: `
    <div class="tooltip custom-tooltip" role="tooltip">
      <div class="tooltip-arrow"></div>
      <div class="tooltip-inner"></div>
    </div>
  `,
  
  // Behavior
  defaultDelay: { show: 200, hide: 100 },
  defaultTrigger: 'hover focus',
  autoHide: true,
  defaultHideOnTargetClick: true,
  
  // Positioning
  defaultOffset: 5,
  defaultContainer: 'body',
  defaultPopperOptions: {
    modifiers: {
      preventOverflow: {
        boundariesElement: 'viewport'
      }
    }
  },
  
  // Loading states
  defaultLoadingClass: 'tooltip-loading spinner',
  defaultLoadingContent: 'Loading...',
  
  // Performance
  disposeTimeout: 3000 // Cleanup after 3 seconds
});

Popover Global Options

Configuration options specific to popover components.

interface GlobalVTooltipPopoverOptions {
  /** Default popover placement */
  defaultPlacement: string;
  
  /** Default theme class for popovers */
  defaultClass: string;
  
  /** Base structural classes */
  defaultBaseClass: string;
  
  /** Wrapper element classes */
  defaultWrapperClass: string;
  
  /** Inner content classes */
  defaultInnerClass: string;
  
  /** Arrow element classes */
  defaultArrowClass: string;
  
  /** Classes applied when popover is open */
  defaultOpenClass: string;
  
  /** Default delay configuration */
  defaultDelay: number | DelayConfig;
  
  /** Default trigger events */
  defaultTrigger: string;
  
  /** Default position offset */
  defaultOffset: number | string;
  
  /** Default container element */
  defaultContainer: string | HTMLElement | false;
  
  /** Default boundaries element */
  defaultBoundariesElement: string | HTMLElement;
  
  /** Default Popper.js options */
  defaultPopperOptions: any;
  
  /** Hides if clicked outside of popover */
  defaultAutoHide: boolean;
  
  /** Update popper on content resize */
  defaultHandleResize: boolean;
}

Popover Configuration Examples:

Vue.use(VTooltip, {
  popover: {
    // Appearance
    defaultPlacement: 'bottom-start',
    defaultClass: 'vue-popover-theme material-design',
    defaultBaseClass: 'tooltip popover elevated',
    defaultWrapperClass: 'wrapper padded',
    defaultInnerClass: 'tooltip-inner popover-inner scrollable',
    defaultArrowClass: 'tooltip-arrow popover-arrow colored',
    defaultOpenClass: 'open visible',
    
    // Behavior
    defaultTrigger: 'click',
    defaultDelay: { show: 0, hide: 200 },
    defaultAutoHide: true,
    defaultHandleResize: true,
    
    // Positioning
    defaultOffset: 8,
    defaultContainer: '.app-container',
    defaultPopperOptions: {
      modifiers: {
        flip: {
          behavior: ['bottom', 'top', 'right', 'left']
        },
        preventOverflow: {
          escapeWithReference: true
        }
      }
    }
  }
});

Template Customization

Customize the HTML structure of tooltips globally.

interface TemplateOptions {
  /** HTML template for tooltip element */
  defaultTemplate: string;
  
  /** CSS selector for arrow element */
  defaultArrowSelector: string;
  
  /** CSS selector for inner content element */
  defaultInnerSelector: string;
}

Template Examples:

Vue.use(VTooltip, {
  // Custom template with additional elements
  defaultTemplate: `
    <div class="tooltip" role="tooltip">
      <div class="tooltip-arrow"></div>
      <div class="tooltip-header"></div>
      <div class="tooltip-inner"></div>
      <div class="tooltip-footer"></div>
    </div>
  `,
  
  // Custom selectors for complex templates
  defaultArrowSelector: '.tooltip-arrow, .custom-arrow',
  defaultInnerSelector: '.tooltip-inner, .tooltip-content',
  
  // Bootstrap-compatible template
  defaultTemplate: `
    <div class="tooltip bs-tooltip-auto" role="tooltip">
      <div class="arrow"></div>
      <div class="tooltip-inner"></div>
    </div>
  `,
  defaultArrowSelector: '.arrow',
  defaultInnerSelector: '.tooltip-inner'
});

Delay Configuration

Advanced delay settings for show/hide timing.

interface DelayConfig {
  /** Delay before showing tooltip in milliseconds */
  show?: number;
  
  /** Delay before hiding tooltip in milliseconds */
  hide?: number;
}

// Delay options
defaultDelay: number | DelayConfig;

Delay Examples:

Vue.use(VTooltip, {
  // Simple delay (applies to both show and hide)
  defaultDelay: 300,
  
  // Separate show/hide delays
  defaultDelay: {
    show: 500,  // Wait 500ms before showing
    hide: 100   // Wait 100ms before hiding
  },
  
  // Popover delays
  popover: {
    defaultDelay: {
      show: 0,    // Show immediately
      hide: 300   // Wait 300ms before hiding
    }
  }
});

Performance Configuration

Settings that affect performance and resource management.

interface PerformanceOptions {
  /** Auto destroy tooltip DOM nodes after specified milliseconds */
  disposeTimeout: number;
  
  /** Automatically hide tooltips on mouseover */
  autoHide: boolean;
  
  /** Update popover position when content size changes */
  defaultHandleResize: boolean;
}

Performance Examples:

Vue.use(VTooltip, {
  // DOM cleanup timing
  disposeTimeout: 2000, // Clean up after 2 seconds
  
  // Auto-hide behavior
  autoHide: true, // Hide when hovering over tooltip
  
  // Popover performance
  popover: {
    defaultHandleResize: false // Disable resize handling for better performance
  }
});

// Disable cleanup for persistent tooltips
Vue.use(VTooltip, {
  disposeTimeout: null // Never auto-dispose
});

Runtime Configuration Changes

Modify configuration during application runtime.

// Runtime configuration changes
VTooltip.options[key] = value;
VTooltip.options.popover[key] = value;

Runtime Examples:

// Change theme based on user preference
function setTooltipTheme(theme) {
  VTooltip.options.defaultClass = `vue-tooltip-theme ${theme}`;
  VTooltip.options.popover.defaultClass = `vue-popover-theme ${theme}`;
}

// Adjust delays based on device
function configureForDevice() {
  const isMobile = window.innerWidth < 768;
  
  VTooltip.options.defaultDelay = isMobile ? 0 : 200;
  VTooltip.options.popover.defaultAutoHide = isMobile;
  VTooltip.enabled = !isMobile; // Disable on mobile
}

// Configure for accessibility
function enableAccessibleMode() {
  VTooltip.options.defaultTrigger = 'focus click';
  VTooltip.options.defaultDelay = { show: 0, hide: 500 };
  VTooltip.options.popover.defaultTrigger = 'click';
}

Install with Tessl CLI