The complete tooltip, popover, dropdown, and menu solution for the web
—
Global utility functions and properties for managing multiple tooltips and accessing framework-level functionality.
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
});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
});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
}
});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
});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