Tooltips — keen_web

TT01 · Option Tooltips

enable_option_tooltips · option_tooltip_placement · option_tooltip_follow_cursor

Enable hover tooltips on the dropdown rows with enable-option-tooltips. With no callback the tooltip shows the option's display value (plus its subtitle on a second line when present); turn on custom content to drive it from getOptionTooltipCallback instead. On a wide control a row-centered tooltip lands mid-screen, so option tooltips default to top-start (anchored to the row's start edge) — or set follow-cursor to track the pointer. On a narrow control, place the tooltip to the right / left side (Floating UI auto-flips if there's no room). Tooltips re-attach as rows recycle, so they work seamlessly with the virtual-scrolled list too.

enable-option-tooltips option-tooltip-follow-cursor custom content (getOptionTooltipCallback)

option-tooltip-delay (ms):

control width: default full-width narrow (200px) large list (1,000 · virtual scroll)

Open the dropdown and hover a row:

TT02 · Independent Styling (--ms-option-tooltip-*)

style="--ms-option-tooltip-bg: #4338ca" — style option tooltips independently of badge tooltips

Option tooltips render with class .ms__option-tooltip and read their own --ms-option-tooltip-* variables, which default to the shared --ms-tooltip-* surface. Override them (set on the element) to style option tooltips independently of badge tooltips — drag the controls and hover a row to see it live.

--ms-option-tooltip-bg: --ms-option-tooltip-text-color:

--ms-option-tooltip-border-radius (px): --ms-option-tooltip-max-width (px):

Custom-styled option tooltips:

TT03 · Badge Tooltips

enable_badge_tooltips · badge_tooltip_placement · remove_button_tooltip_text="Remove {0}"

The same tooltip engine drives the selected-badge tooltips. Enable with enable-badge-tooltips; place them with badge-tooltip-placement, customize content with getBadgeTooltipCallback (the custom content toggle), and set the remove-button text with remove-button-tooltip-text ({0} = the item name).

enable-badge-tooltips custom content (getBadgeTooltipCallback)

badge-tooltip-placement: top bottom left right

remove-button-tooltip-text:

Hover a badge (or its × button):

TT04 · Summary

Option tooltips

enable-option-tooltips        // boolean, default false
option-tooltip-placement      // 'top' | 'top-start' | ... | 'left' | 'right' (default 'top-start')
option-tooltip-delay          // ms before show (falls back to badge-tooltip-delay, then 100)
option-tooltip-offset         // px gap (falls back to badge-tooltip-offset, then 8)
option-tooltip-follow-cursor  // boolean, default false — anchor to & track the pointer

el.enableOptionTooltips
el.optionTooltipPlacement
el.optionTooltipFollowCursor
el.getOptionTooltipCallback = (item) => string | HTMLElement

// Independent styling (default to the shared --ms-tooltip-* surface):
--ms-option-tooltip-bg | -text-color | -padding | -border-radius
--ms-option-tooltip-font-size | -max-width | -shadow | -z-index

Badge tooltips

enable-badge-tooltips      // attribute (boolean, default false)
badge-tooltip-placement    // 'top' | 'bottom' | 'left' | 'right' (default 'top')
badge-tooltip-delay        // ms before show (default 100)
badge-tooltip-offset       // px gap (default 8)
remove-button-tooltip-text // {0} = item name
el.getBadgeTooltipCallback        = (item) => string | HTMLElement
el.getRemoveButtonTooltipCallback = (item) => string

Shared styling:

Option and badge tooltips render with the same --ms-tooltip-* CSS variables and share the badge tooltip's placement / delay / offset settings.