Tippy.js gives you flexible control over when tooltips appear by letting you choose different trigger options. The trigger property determines which user interaction(s) display or hide the tooltip. The most common triggers are "mouseenter" (hover), "focus", and "click", but you can also use "manual" to control tooltip visibility entirely through JavaScript.

When you set trigger: 'mouseenter', the tooltip shows when a user hovers the mouse over the reference element. This is ideal for icons, buttons, or links where users expect quick, contextual information. The "focus" trigger is best for keyboard accessibility—showing tooltips when users tab to an input or button. "click" is useful when you want the tooltip to behave more like a popover, requiring explicit user action to open and close. With "manual", you take full control, showing or hiding the tooltip in response to any custom event, such as a button click or after a form submission.

You can combine triggers by providing a space-separated list, such as trigger: 'mouseenter focus'. This approach ensures tooltips appear for both mouse and keyboard users, improving accessibility and user experience. For example, combining "mouseenter" and "focus" on a button means both hovering and tabbing to the button will display the tooltip.

Choose your triggers based on the context and the user's needs. Use "focus" for form fields to help keyboard users, "mouseenter" for icons or brief explanations, "click" for interactive popovers, and "manual" for advanced, programmatic control.