🎯 New in Latest Version

Two powerful features for better user experience:

  • Partial Badges Mode: Show a limited number of badges with a "+X more" badge when selections exceed a threshold
  • Badge Tooltips: Display helpful information when hovering over badges, perfect for truncated text or additional context

Partial Badges Mode

AF01 Partial Badges with Threshold

Show limited badges + '+X more' badge when threshold exceeded

Demo

Select more than 5 items to see partial mode in action

Controls

Try this:

  1. Select 1-5 items: All badges shown normally
  2. Select 6+ items: Shows 3 badges + "+X more" badge
  3. Click "+X more": Opens popover with all items
  4. Click remove on "+X more": Removes all hidden items
Description
Configuration
<web-multiselect
  badges-threshold="5"
  badges-threshold-mode="partial"
  badges-max-visible="3"
></web-multiselect>

badges-threshold: Trigger after N selections

badges-threshold-mode: 'partial' or 'count'

badges-max-visible: How many badges to show

AF02 Compare: Partial vs Count Mode

See the difference between partial and count modes

Demo

Shows 1 badge + "+X more" badge

Controls

Shows "X selected" badge only

Description
When to Use Each

Partial Mode:

  • When users need to see some selections
  • Better visual context
  • Quick access to recent selections

Count Mode:

  • When space is limited
  • Many selections expected
  • Compact display preferred

Badge Tooltips

AF03 Basic Tooltips

Default tooltips showing display value + subtitle

Demo

Hover over badges to see full specifications

Controls

Tooltip features:

  • Hover over badge: Shows display value + subtitle
  • Hover over remove button: Shows "Remove [name]"
  • 500ms delay before showing (configurable)
  • Positioned with Floating UI (auto-flip)
Description
Basic Setup
<web-multiselect
  enable-badge-tooltips="true"
  badge-tooltip-placement="top"
  subtitle-member="subtitle"
></web-multiselect>

Default content: display value + subtitle

Placement options: top, bottom, left, right

AF04 Custom Tooltip Content

Use getBadgeTooltipCallback for custom content

Demo

Tooltips show name, email, role, and department

Controls

Custom callback:

select.getBadgeTooltipCallback = (user) => {
  return `${user.name}
${user.email}
${user.role} - ${user.department}`;
};

Return a string or HTMLElement for rich content.

Description
Custom Content

The callback receives the full data item and can return:

  • String: Simple text (supports \n)
  • HTMLElement: Rich HTML content

Perfect for showing additional data not visible in the badge.

AF05 Styled Tooltips

Customize appearance with CSS variables

Demo

Purple tooltips with custom styling

Controls

CSS Variables:

web-multiselect {
  --ml-tooltip-bg: #667eea;
  --ml-tooltip-color: white;
  --ml-tooltip-padding: 0.75rem 1rem;
  --ml-tooltip-border-radius: 8px;
  --ml-tooltip-font-size: 0.9rem;
  --ml-tooltip-shadow: 0 4px 12px ...;
}
Description
Available CSS Variables
  • --ms-tooltip-bg
  • --ms-tooltip-text-color
  • --ms-tooltip-padding
  • --ms-tooltip-border-radius
  • --ms-tooltip-font-size
  • --ms-tooltip-shadow
  • --ms-tooltip-max-width
  • --ms-tooltip-z-index

Combined Features

AF06 Partial Badges + Tooltips

Both features working together

Demo

Partial mode with tooltips on visible badges

Controls

Combined setup:

  1. Enable both features in attributes
  2. Tooltips work on visible badges only
  3. "+X more" badge has tooltip on remove button
  4. Popover items don't have tooltips (full info shown)
Description
Best Practices

Use partial badges when:

  • Users select 5-20 items typically
  • Visual context is helpful
  • Space allows 2-4 badges

Use tooltips when:

  • Badges have truncated text
  • Additional info is valuable
  • Keyboard users need context

📚 Summary

Partial Badges Mode

  • Better than count mode for moderate selections
  • Provides visual context while saving space
  • Interactive "+X more" badge opens popover
  • Remove button clears all hidden items

Badge Tooltips

  • Shows full info on hover (500ms delay)
  • Default: display value + subtitle
  • Custom: use callback for rich content
  • Fully customizable via CSS variables