🎯 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

Partial Badges with Threshold

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

Live Demo

Select more than 5 items to see partial mode in action

Instructions

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
Configuration
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

Compare: Partial vs Count Mode

See the difference between partial and count modes

Partial Mode (badges-threshold-mode='partial')

Shows 1 badge + "+X more" badge

Count Mode (badges-threshold-mode='count')

Shows "X selected" badge only

Comparison
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

Basic Tooltips

Default tooltips showing display value + subtitle

Live Demo

Hover over badges to see full specifications

Instructions

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)
Configuration
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

Custom Tooltip Content

Use getBadgeTooltipCallback for custom content

Live Demo

Tooltips show name, email, role, and department

Callback Code

Custom callback:

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

Return a string or HTMLElement for rich content.

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

Styled Tooltips

Customize appearance with CSS variables

Live Demo

Purple tooltips with custom styling

CSS Variables

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 ...;
}
Customization
Available CSS Variables
  • --ml-tooltip-bg
  • --ml-tooltip-color
  • --ml-tooltip-padding
  • --ml-tooltip-border-radius
  • --ml-tooltip-font-size
  • --ml-tooltip-shadow
  • --ml-tooltip-max-width
  • --ml-tooltip-z-index

Combined Features

Partial Badges + Tooltips

Both features working together

Live Demo

Partial mode with tooltips on visible badges

Try It

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)
Best Practices
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