Overview

#

Floating elements are UI elements that appear above the page content, such as tooltips and dropdown menus. KDS provides built-in components as well as a low-level logic for managing the positioning of any floating element.

Terms

#

• Floating element appears or disappears in response to user interaction with the activator element. Common examples include tooltips and dropdown menus.
• Activator element is the element that a user interacts with to activate a floating element. It could be a button that opens a dropdown menu, or an element that shows a tooltip on hover.
• Anchor element is the element to which a floating element is anchored. It is often the same as the activator element, but not always. For example, a tooltip might be anchored to the info icon next to the input, but activated by focusing the input itself.

Components

#

• KTooltip displays a tooltip for an element
• KDropdownMenu displays a dropdown or context menu

Composables

#

• useKFloatingPosition manages the positioning of floating elements relative to their anchor elements. Some design system components use it internally, but it can also be used independently, typically (but not necessarily) together with useKFloatingInteraction.
• useKFloatingInteraction TBD