Tooltips — keen_web

1. Option Tooltips (default content)

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 (here mapped from each option's description).

Open the dropdown and hover a row:

<web-multiselect enable-option-tooltips="true"></web-multiselect>

Try it:

Click to open the list, then hover over a row. The tooltip appears after the default 100 ms delay.

2. Option Tooltips (custom getOptionTooltipCallback)

Build rich, per-option tooltip content with getOptionTooltipCallback. It receives the option object and returns a string or an HTMLElement. This is a JS-only callback, set on the element in the inline script.

Hover a row to see its description:

multiselect.getOptionTooltipCallback = (item) =>
  `${item.label} — ${item.description}`;

3. Option Tooltips with Virtual Scrolling

Tooltips re-attach as rows recycle into view, so they work seamlessly with the virtual-scrolled list (this one holds 1,000 options).

Scroll the list, then hover any row:

// No extra config — virtual scrolling is automatic past ~100 items.
multiselect.getOptionTooltipCallback = (item) => `Value: ${item.value}`;

4. Full-Width Rows — Placement & Follow-Cursor

On a wide multiselect, a row-centered tooltip lands in the middle of the screen. Two fixes: option tooltips default to option_tooltip_placement="top-start" (anchored to the row's start edge), or set option_tooltip_follow_cursor=true so the tooltip tracks the pointer.

Full-width, default top-start anchoring:

Full-width, follow-cursor — move the mouse along a row:

<!-- anchored to the row start (default) -->
<web-multiselect enable-option-tooltips="true"
                 option-tooltip-placement="top-start"></web-multiselect>

<!-- or follow the pointer -->
<web-multiselect enable-option-tooltips="true"
                 option-tooltip-follow-cursor="true"></web-multiselect>

5. Narrow Multiselect — Side (start/end) Placement

For a small/narrow multiselect, show the tooltip on the side of the row instead of above it. Use option_tooltip_placement="right" (end side) or "left" (start side). Floating UI auto-flips to the opposite side if there isn't room.

Narrow control, tooltip on the right (end) side:

<web-multiselect enable-option-tooltips="true"
                 option-tooltip-placement="right">  <!-- or "left" -->
</web-multiselect>

6. Independent Styling (--ms-option-tooltip-*)

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 to style option tooltips independently of badge tooltips.

Custom-styled option tooltips (set on the element):

web-multiselect {
  --ms-option-tooltip-bg: #4338ca;
  --ms-option-tooltip-text-color: #fff;
  --ms-option-tooltip-border-radius: 2px;
  --ms-option-tooltip-max-width: 160px;
}

7. Badge Tooltips

The same tooltip engine drives the selected-badge tooltips. Enable with enable_badge_tooltips; customize content with getBadgeTooltipCallback and the remove-button text with remove_button_tooltip_text.

Select a few items, then hover a badge (or its × button):

<web-multiselect
  enable-badge-tooltips="true"
  remove-button-tooltip-text="Remove {0}">
</web-multiselect>

multiselect.getBadgeTooltipCallback = (item) =>
  `${item.label}: ${item.description}`;

📋 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.