如何为select2的每个选项单独添加hover触发的popover？

核心问题分析 #

1. Select2的下拉选项是动态渲染的，直接给静态元素绑定hover事件会失效
2. .select2-results__option--highlighted是Select2在hover时动态添加的类，直接绑定该类事件会因元素未生成而失效，需用事件委托监听父容器事件
3. 要实现选项与popover内容的对应，需先给每个选项存储自定义关联数据

具体实现步骤 #

1. 给Select2选项注入自定义关联数据 #

在HTML的option标签中，通过data-*属性存储对应popover的标题和内容：

<select id="effort-select">
  <option value="low" data-title="titlePop1" data-content="textPop1">Low effort</option>
  <option value="high" data-title="titlePop2" data-content="textPop2">High effort</option>
</select>

2. 用事件委托监听选项hover事件 #

Select2的下拉容器是动态生成的，需监听父容器的鼠标事件来定位当前hover的选项：

// 初始化Select2
$('#effort-select').select2();

// 鼠标进入选项时显示对应popover
$(document).on('mouseenter', '.select2-results__option', function() {
  const $currentOption = $(this);
  // 跳过禁用选项
  if ($currentOption.hasClass('select2-results__option--disabled')) return;

  // 获取当前选项绑定的popover数据
  const popTitle = $currentOption.data('title');
  const popContent = $currentOption.data('content');

  // 初始化并显示popover，手动控制触发逻辑避免冲突
  $currentOption.popover({
    title: popTitle,
    content: popContent,
    placement: 'right',
    trigger: 'manual',
    html: false // 若内容含HTML可改为true
  }).popover('show');
});

// 鼠标离开选项时销毁popover
$(document).on('mouseleave', '.select2-results__option', function() {
  $(this).popover('hide').popover('dispose');
});

3. 修复.select2-results__option--highlighted无效问题 #

该类是Select2动态添加的，无法直接绑定事件，需通过事件委托监听父容器的mouseenter/mouseleave，再判断当前元素是否包含该类（或者直接用上述的选项hover监听逻辑更直接）。

4. 避免popover冲突 #

• 使用trigger: 'manual'手动控制显示隐藏，规避与Select2自身hover逻辑的冲突
• 离开时销毁popover，防止多个popover残留

注意事项 #

• 确保已正确引入jQuery和Bootstrap（若使用Bootstrap的popover组件）
• 若为自定义popover组件，替换对应的初始化、显示、销毁逻辑即可
• 动态生成的Select2选项，需确保data-title和data-content属性正确注入

内容的提问来源于stack exchange，提问作者neves