Interactive tooltips and popovers in Tippy.js allow you to include elements like forms, buttons, or links directly within the floating UI. By setting the interactive option to true, you enable users to interact with the content inside the tooltip or popover, rather than having it close immediately when the mouse leaves the reference element. This is essential for floating UIs that contain clickable or focusable elements—such as input fields, checkboxes, or action buttons—because it prevents the tooltip from hiding when users try to click or type inside it.

Focus management is also important for interactive tooltips. You should make sure that when the tooltip opens, the first focusable element (like an input) receives focus. This improves usability and accessibility, especially for keyboard users. In the example above, the tooltip uses the onShow lifecycle hook to focus the input field as soon as the tooltip appears.

Common use cases for interactive floating UI include:

• Login forms;
• Quick feedback forms;
• Dropdown menus;
• Contextual action panels.

Whenever you need users to be able to click, type, or otherwise interact with content inside a tooltip or popover, enabling the interactive option is the correct approach.