Summary  
This chapter covers how to configure and combine event triggers to control the visibility of interactive elements programmatically, including manual control for custom behaviors.

General domain of usage  
Frontend user interface interactions

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPHRpdGxlPlRpcHB5LmpzIEV2ZW50IFRyaWdnZXJzIEV4YW1wbGU8L3RpdGxlPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJodHRwczovL3VucGtnLmNvbS90aXBweS5qc0A2L2Rpc3QvdGlwcHkuY3NzIiAvPgogICAgPHN0eWxlPgogICAgICBib2R5IHsKICAgICAgICBmb250LWZhbWlseTogc2Fucy1zZXJpZjsKICAgICAgICBtYXJnaW46IDJyZW07CiAgICAgIH0KICAgICAgLmRlbW8tYnRuLAogICAgICAuZGVtby1pbnB1dCwKICAgICAgLm1hbnVhbC1idG4gewogICAgICAgIG1hcmdpbjogMXJlbSAwOwogICAgICAgIGRpc3BsYXk6IGJsb2NrOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxidXR0b24gY2xhc3M9ImRlbW8tYnRuIiBpZD0iaG92ZXItYnRuIj5Ib3ZlciBtZTwvYnV0dG9uPgogICAgPGJ1dHRvbiBjbGFzcz0iZGVtby1idG4iIGlkPSJjbGljay1idG4iPkNsaWNrIG1lPC9idXR0b24+CiAgICA8aW5wdXQKICAgICAgY2xhc3M9ImRlbW8taW5wdXQiCiAgICAgIGlkPSJmb2N1cy1pbnB1dCIKICAgICAgdHlwZT0idGV4dCIKICAgICAgcGxhY2Vob2xkZXI9IkZvY3VzIG9uIG1lIgogICAgLz4KICAgIDxidXR0b24gY2xhc3M9Im1hbnVhbC1idG4iIGlkPSJtYW51YWwtYnRuIj5TaG93IE1hbnVhbCBUb29sdGlwPC9idXR0b24+CgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vdW5wa2cuY29tL0Bwb3BwZXJqcy9jb3JlQDIiPjwvc2NyaXB0PgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vdW5wa2cuY29tL3RpcHB5LmpzQDYiPjwvc2NyaXB0PgogICAgPHNjcmlwdD4KICAgICAgLy8gSG92ZXIgKyBrZXlib2FyZCBmb2N1cwogICAgICB0aXBweSgiI2hvdmVyLWJ0biIsIHsKICAgICAgICBjb250ZW50OiAiVG9vbHRpcCBvbiBob3ZlciBvciBmb2N1cyIsCiAgICAgICAgdHJpZ2dlcjogIm1vdXNlZW50ZXIgZm9jdXMiCiAgICAgIH0pOwoKICAgICAgLy8gQ2xpY2stdHJpZ2dlcmVkIHRvb2x0aXAKICAgICAgdGlwcHkoIiNjbGljay1idG4iLCB7CiAgICAgICAgY29udGVudDogIlRvb2x0aXAgb24gY2xpY2siLAogICAgICAgIHRyaWdnZXI6ICJjbGljayIsCiAgICAgICAgaW50ZXJhY3RpdmU6IHRydWUKICAgICAgfSk7CgogICAgICAvLyBGb2N1cy10cmlnZ2VyZWQgdG9vbHRpcAogICAgICB0aXBweSgiI2ZvY3VzLWlucHV0IiwgewogICAgICAgIGNvbnRlbnQ6ICJUb29sdGlwIG9uIGZvY3VzIiwKICAgICAgICB0cmlnZ2VyOiAiZm9jdXMiCiAgICAgIH0pOwoKICAgICAgLy8gTWFudWFsIGNvbnRyb2wgdG9vbHRpcAogICAgICBjb25zdCBtYW51YWxCdG4gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgibWFudWFsLWJ0biIpOwoKICAgICAgdGlwcHkobWFudWFsQnRuLCB7CiAgICAgICAgY29udGVudDogIk1hbnVhbCBjb250cm9sIHRvb2x0aXAiLAogICAgICAgIHRyaWdnZXI6ICJtYW51YWwiCiAgICAgIH0pOwoKICAgICAgbGV0IGhpZGVUaW1lcjsKCiAgICAgIG1hbnVhbEJ0bi5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsICgpID0+IHsKICAgICAgICBjbGVhclRpbWVvdXQoaGlkZVRpbWVyKTsKICAgICAgICBtYW51YWxCdG4uX3RpcHB5LnNob3coKTsKICAgICAgICBoaWRlVGltZXIgPSBzZXRUaW1lb3V0KCgpID0+IG1hbnVhbEJ0bi5fdGlwcHkuaGlkZSgpLCAxNTAwKTsKICAgICAgfSk7CiAgICA8L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

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.

Which trigger option would you use to show a tooltip when a user focuses on an input field?

Learn to create modern, accessible tooltips and popovers using Tippy JS. Explore configuration options, styling techniques, animations, and interaction triggers to enhance user experience.

Understand the role of tooltips and popovers in modern interfaces and explore how Tippy JS simplifies floating UI elements. Learn the core setup process and essential accessibility considerations.

Control how tooltips and popovers look and behave through themes, animations, and trigger configurations. Shape floating UI elements to match design systems and interaction patterns.

Build interactive tooltips and rich popovers containing custom content and components. Manage multiple instances and complex behaviors in larger interfaces.

Apply Tippy JS in dynamic interfaces and real application flows. Focus on usability patterns, integration with changing content, and resolving common implementation issues.

Event Triggers and Custom Behavior

Event Triggers and Custom Behavior