CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tippy-js

The complete tooltip, popover, dropdown, and menu solution for the web

Pending
Overview
Eval results
Files

global-utilities.mddocs/

Global Utilities

Global utility functions and properties for managing multiple tooltips and accessing framework-level functionality.

Capabilities

Hide All Tooltips

Utility function to hide all currently visible tooltip instances with optional exclusions and duration override.

/**
 * Hide all visible tooltip instances
 * @param options - Optional configuration for hiding behavior
 */
function hideAll(options?: HideAllOptions): void;

interface HideAllOptions {
  /** Override duration for hiding animation */
  duration?: number;
  /** Exclude specific instance or reference element from hiding */
  exclude?: Instance | ReferenceElement;
}

Usage Examples:

import { hideAll } from "tippy.js";

// Hide all visible tooltips
hideAll();

// Hide all with custom duration
hideAll({ duration: 100 });

// Hide all except specific instance
const importantTooltip = tippy('#important', { content: 'Keep me visible' });
hideAll({ exclude: importantTooltip });

// Hide all except tooltips on specific element
const keepVisible = document.querySelector('#keep-visible');
hideAll({ exclude: keepVisible });

// Use in combination with other events
document.addEventListener('scroll', () => {
  hideAll({ duration: 0 }); // Hide immediately on scroll
});

Default Properties Management

Global default properties that apply to all new tooltip instances, with utilities for reading and updating them.

interface TippyStatics {
  /** Current input state tracking */
  readonly currentInput: { isTouch: boolean };
  /** Current global default properties */
  readonly defaultProps: DefaultProps;
  /** Update global default properties */
  setDefaultProps(partialProps: Partial<DefaultProps>): void;
}

interface DefaultProps extends Omit<Props, 'delay' | 'duration'> {
  delay: number | [number, number];
  duration: number | [number, number];
}

Usage Examples:

import tippy from "tippy.js";

// Check current defaults
console.log(tippy.defaultProps.placement); // 'top'
console.log(tippy.defaultProps.theme); // ''

// Update global defaults (affects all new instances)
tippy.setDefaultProps({
  delay: [500, 100], // [show delay, hide delay]
  duration: [200, 150], // [show duration, hide duration]
  placement: 'bottom',
  theme: 'dark',
  arrow: false
});

// Create instance with updated defaults
const instance = tippy('#button', { content: 'Uses new defaults' });

// Override specific defaults for an instance
const customInstance = tippy('#special', {
  content: 'Custom tooltip',
  placement: 'top', // Override the global 'bottom' default
  theme: 'light' // Override the global 'dark' default
});

Input State Tracking

Global state tracking for current input method (mouse vs touch) to enable adaptive behavior.

interface CurrentInput {
  /** Whether the current input method is touch-based */
  readonly isTouch: boolean;
}

// Accessed via tippy.currentInput
const currentInput: CurrentInput;

Usage Examples:

import tippy from "tippy.js";

// Adaptive behavior based on input type
tippy('.adaptive-tooltip', {
  content: 'Adaptive tooltip',
  trigger: tippy.currentInput.isTouch ? 'click' : 'mouseenter focus',
  delay: tippy.currentInput.isTouch ? 0 : 500,
  touch: tippy.currentInput.isTouch ? true : ['hold', 500]
});

// Dynamic configuration based on input
function createResponsiveTooltip(element, content) {
  return tippy(element, {
    content,
    interactive: !tippy.currentInput.isTouch, // Non-interactive on touch
    interactiveBorder: tippy.currentInput.isTouch ? 0 : 20,
    hideOnClick: tippy.currentInput.isTouch ? true : 'toggle'
  });
}

// React to input changes
document.addEventListener('touchstart', () => {
  if (tippy.currentInput.isTouch) {
    // Touch mode activated - update existing tooltips
    hideAll(); // Hide mouse-activated tooltips
  }
});

Constants

Pre-defined constants for common use cases and styling.

/** Pre-defined SVG arrow with rounded corners */
const roundArrow: string;

Usage Examples:

import tippy, { roundArrow } from "tippy.js";

// Use rounded arrow
tippy('#rounded-arrow', {
  content: 'Tooltip with rounded arrow',
  arrow: roundArrow
});

// Custom arrow with roundArrow as base
tippy('#custom-arrow', {
  content: 'Custom styled arrow',
  arrow: roundArrow,
  theme: 'custom-arrow-theme' // Define in CSS
});

Utility Functions

Additional utility functions for advanced tooltip management.

// Get all mounted instances
const mountedInstances: Instance[];

// Type guards for element checking
function isElement(value: any): value is Element;
function isReferenceElement(value: any): value is ReferenceElement;

Usage Examples:

import tippy from "tippy.js";

// Access all mounted instances (internal usage)
// Note: This is internal API, use with caution
const allInstances = tippy.mountedInstances;

// Bulk operations on all instances
function updateAllTooltips(newTheme) {
  allInstances.forEach(instance => {
    instance.setProps({ theme: newTheme });
  });
}

// Count visible tooltips
function countVisibleTooltips() {
  return allInstances.filter(instance => instance.state.isVisible).length;
}

// Find instance by reference element
function findTooltipForElement(element) {
  return allInstances.find(instance => instance.reference === element);
}

Install with Tessl CLI

npx tessl i tessl/npm-tippy-js

docs

core-tooltip.md

event-delegation.md

global-utilities.md

index.md

plugins.md

singleton-tooltips.md

tile.json