repository·master·Indexed 11 days ago
https://github.com/atomiks/tippyjsA complete tooltip, popover, dropdown, and menu solution for the web, built on top of Popper.js for positioning. Version 6.3.7 includes support for custom themes, ARIA attributes, and a plugin system for features like followCursor and sticky.
Headless Tippy refers to using Tippy.js without its default element rendering or CSS. This mode is used when you want to provide your own custom DOM elements and styles while leveraging Tippy's underlying logic (positioning, lifecycle, etc.).
Note: When using Headless mode, props marked with the R symbol in the standard documentation no longer function automatically; you are responsible for implementing those features (like rendering and animations) yourself.
Lifecycle hooks allow you to run code at specific stages of a Tippy instance's lifecycle. They are primarily used to add functionality via plugins or directly within the Tippy configuration object. Every lifecycle hook receives the instance as its first argument.
tippy(reference, {
onCreate(instance) {
// ...
},
});A standard Gatsby starter includes several key configuration and source files:
src/: Contains front-end code like page templates and components. Edit src/pages/index.js to change your home page.gatsby-config.js: The main configuration file for site metadata and plugins.gatsby-node.js: Used for implementing Gatsby Node APIs to customize the build process.gatsby-browser.js: Used for implementing Gatsby browser APIs to customize client-side behavior.gatsby-ssr.js: Used for implementing Gatsby server-side rendering (SSR) APIs.package.json: The Node.js manifest file containing project metadata and dependencies..prettierrc: Configuration for the Prettier code formatter.While CSS-only tooltip libraries (like Microtip or Balloon.css) are smaller in size (~1 kB), they lack several advanced features provided by Tippy.js:
followCursor.The tippy() function's return type depends on the argument provided:
| Argument Type | Return Type | Description |
|---|---|---|
Element | Instance | Returns a single instance for the specific target element. |
string | Instance[] | Returns an array of instances for all elements matching the selector. |
NodeList | Instance[] | Returns an array of instances for all elements in the NodeList. |
Element[] | Instance[] | Returns an array of instances for the provided array of elements. |
// Single instance
const instance = tippy(document.querySelector('button'));
// Array of instances
const instances1 = tippy('button');
const instances2 = tippy([element1, element2]);
const instances3 = tippy(document.querySelectorAll('.btn'));content includes links, buttons, or other elements that the user needs to click or hover over, you must set interactive: true in the Tippy configuration.Understanding the distinction between these two extension types:
tippy() constructor. It controls or creates many different Tippy instances.interactive: true in the configuration.A plugin is an object that allows you to add new properties (props) and lifecycle hooks to a tippy instance. Plugins are invoked per-instance, and the plugin function fn receives the instance as an argument, allowing you to use closures for internal state.
Plugin Shape:
name (Optional): The name of the new prop this plugin provides.defaultValue (Optional): The default value for the new prop.fn (Required): A function that takes the instance and returns an object containing lifecycle hooks.const plugin = {
// Optional
name: 'propName',
defaultValue: 'anyValue',
// Required
fn(instance) {
// Internal state
return {
// Lifecycle hooks
};
},
};Tippy.js is an abstraction built on top of Popper.js.
You can use them together without additional cost as Tippy depends on Popper. If you are using the CDN, the Popper constructor is already available globally.
import Popper from 'popper.js';
import tippy from 'tippy.js';Touch devices handle taps differently: iOS often requires a second tap to fire a click event (allowing a tooltip to be seen first), while Android fires the click event immediately.
To manage this, you can use tippy.currentInput.isTouch to detect if the user is currently using touch input. This is a dynamic property that changes based on the user's current input method (useful for hybrid devices).
.click() on the element inside the onShow lifecycle hook if the platform is detected as iOS.// Detecting iOS
const isIOS = /iPhone|iPad|iPod/.test(navigator.platform);
// Strategy A: Single tap to click on iOS
tippy(button, {
onShow() {
if (isIOS) {
button.click();
}
},
});
// Strategy B: Emulate iOS double-tap behavior on Android/Touch
function emulateIOS(listener) {
let clicks = 0;
return function () {
clicks++;
if (clicks === 2 || isIOS || !tippy.currentInput.isTouch) {
clicks = 0;
listener.apply(this, arguments);
}
};
}Tooltipster is a similar library but has a significant dependency difference: