如何为列表项的border-left区域设置差异化Tooltip？

针对你的需求，这里提供一个直接可行的实现方式——核心是给每行的左侧颜色区域单独创建可承载Tooltip的DOM元素，而非依赖td的border-left样式：

步骤1：修改Razor列表渲染代码 #

在每行的第一个<td>内添加一个专门的小元素，同时充当左侧颜色条和Tooltip触发体，动态绑定对应的类型说明和颜色：

@foreach (var request in RequestList)
{
    <tr class="my-request">
        <td style="position: relative; padding-left: 15px;">
            <!-- 左侧颜色条 + Tooltip触发元素 -->
            <span class="type-indicator"
                  data-toggle="tooltip"
                  title="@request.TypeDescription"
                  style="background-color: @request.TypeColor; position: absolute; left: 0; top: 0; bottom: 0; width: 10px;"></span>
            <!-- 原TD内容 -->
            @request.Title
        </td>
        <!-- 其他列内容 -->
        <td>@request.CreateTime</td>
    </tr>
}

步骤2：调整CSS样式 #

移除原来针对td:first-child的border-left设置，替换为上述span的背景色实现；如果不需要动态颜色，也可以把固定类型的颜色写到CSS类里：

/* 移除原border-left样式 */
/* my-request.aRequestType, tr.my-request td:first-child {
    border-left: 10px solid #757e4b;
} */

/* 给固定类型的指示器写通用类（可选） */
.type-indicator.type-a { background-color: #757e4b; }
.type-indicator.type-b { background-color: #c0392b; }

如果用固定类，Razor代码可调整为：

<span class="type-indicator type-@request.TypeCode"
      data-toggle="tooltip"
      title="@request.TypeDescription"></span>

步骤3：初始化Bootstrap Tooltip #

在页面底部添加脚本初始化Tooltip，设置合适的显示位置（比如右侧，匹配左侧触发元素的位置）：

$(function() {
    $('.type-indicator').tooltip({
        placement: 'right',
        trigger: 'hover'
    });
});

效果说明 #

• 只有鼠标悬停在左侧10px宽的颜色条区域时，才会弹出对应类型的Tooltip
• 每行的Tooltip内容和颜色都能通过Razor动态绑定，完全满足个性化需求
• 视觉效果和原来的border-left完全一致，不会影响页面布局

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