修复下拉按钮列表onmouseover描述显示问题：支持下拉项与右侧展示

我来帮你搞定这个需求！要实现所有按钮及下拉项的描述在鼠标悬停时于列表右侧展示，同时让下拉列表项也支持hover触发描述，咱们可以用「JavaScript + CSS」的组合方案，比纯CSS更灵活，能覆盖所有交互场景。

核心思路 #

1. 新增一个固定在按钮列表右侧的描述面板，用来统一展示所有元素的hover描述
2. 给所有需要触发描述的元素（普通按钮、下拉列表项）添加统一标识，方便JS监听事件
3. 通过JS监听mouseover/mouseout事件，动态将元素的描述内容填充到右侧面板并控制显示/隐藏

完整代码实现 #

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* 描述面板样式：固定在按钮列表右侧，默认隐藏 */
.description-panel {
  position: absolute;
  left: 370px; /* 对应按钮容器宽度，留出间隔 */
  top: 40px;
  width: 300px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: none;
}

/* 按钮容器改为相对定位，方便描述面板定位 */
.button-container {
  position: relative;
  width: 350px;
}
</style>

<p>
  <font color="#909497">Drop-down Buttons list</font>
</p>
<!-- 新增按钮容器，设置相对定位 -->
<div class="button-container">
  <button data-description="Button 1 description" class="tooltip-trigger" id="menu1" onclick="window.open('http://link.com', '_blank')" type="button" style="width: 268px; height: 68px;">Button 1</button>
  
  <div align="left" class="dropdown" style="width: 333px; height: 34px;">
    <button class="btn btn-default dropdown-toggle" id="menu2" aria-expanded="false" type="button" data-toggle="dropdown" style="width: 268px; height: 34px;">Drop-Down Button 1 <span class="caret"></span></button>
    <ul role="menu" aria-labelledby="menu2">
      <li role="presentation">
        <a data-description="Drop-down item 1 description" tabindex="-1" class="tooltip-trigger" href="https://link2.com/" target="_blank">Drop-down item 1</a>
      </li>
      <li role="presentation">
        <a data-description="Drop-down item 2 description" tabindex="-1" class="tooltip-trigger" role="menuitem" href="https://link3.com" target="_blank">Drop-down item 2</a>
      </li>
    </ul>
  </div>
  
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" id="menu3" type="button" data-toggle="dropdown" style="width: 268px; height: 34px;">Drop-Down Button 3 <span class="caret"></span></button>
    <ul role="menu" aria-labelledby="menu3">
      <li role="presentation">
        <a data-description="drop-down item 3 description" tabindex="-1" class="tooltip-trigger" role="menuitem" href="http://link6.com" target="_blank">Drop-down item 3 </a>
      </li>
      <li role="presentation">
        <a data-description="drop-down item 4 description" tabindex="-1" class="tooltip-trigger" role="menuitem" href="#">Drop-down item 4 </a>
      </li>
      <li role="presentation">
        <a data-description="drop-down item 5 description" tabindex="-1" class="tooltip-trigger" role="menuitem" href="#">Drop-down item 5 </a>
      </li>
      <li role="presentation">
        <a data-description="drop-down item 6 description" tabindex="-1" class="tooltip-trigger" role="menuitem" href="http://link.com" target="_blank">Drop-down item 6</a>
      </li>
      <li role="presentation">
        <a data-description="Drop-down item 7 description" tabindex="-1" class="tooltip-trigger" role="menuitem" href="#">Drop-down item 7</a>
      </li>
    </ul>
  </div>
  
  <button data-description="Button 4 description" class="tooltip-trigger" id="menu4" onclick="window.open('http://link.com', '_blank')" type="button" style="width: 268px; height: 34px;">Button 4</button>
  <button data-description="Button 5 description" class="tooltip-trigger" id="menu5" onclick="window.open('http://link.com', '_blank')" type="button" style="width: 268px; height: 34px;">Button 5 </button>
  
  <!-- 右侧描述面板 -->
  <div class="description-panel" id="descriptionPanel"></div>
</div>

<script>
$(document).ready(function() {
  // 获取描述面板元素
  const descPanel = $('#descriptionPanel');
  
  // 监听所有触发元素的mouseover事件
  $('.tooltip-trigger').on('mouseover', function() {
    // 获取当前元素的描述内容
    const description = $(this).data('description');
    // 填充内容并显示面板
    descPanel.text(description).show();
  });
  
  // 监听mouseout事件，隐藏面板
  $('.tooltip-trigger').on('mouseout', function() {
    descPanel.hide();
  });
  
  // 额外处理：鼠标移到描述面板上时保持显示，提升体验
  descPanel.on('mouseover', function() {
    $(this).show();
  });
  
  descPanel.on('mouseout', function() {
    $(this).hide();
  });
});
</script>

关键细节说明 #

• 用data-description属性存储描述内容，避免和浏览器默认的title tooltip冲突（如果保留title，浏览器会同时显示默认tooltip和自定义面板）
• 按钮容器设置position: relative，让右侧描述面板可以基于它精准定位
• 给所有需要触发描述的元素添加统一类tooltip-trigger，方便批量绑定事件
• 处理了描述面板自身的hover事件：当鼠标移到面板上时，保持面板显示，避免用户查看描述时意外隐藏

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