添加<base href="~/"/>后ASP.NET MVC中Bootstrap Tooltip样式失效求助

• 现有.NET 6版本的ASP.NET MVC项目，已集成jQuery 3.6.4和Bootstrap 4.4.1
• 为引入Blazor Server端组件，在_Layout.cshtml的<head>标签首行添加了<base href="~/" />标签
• 此前正常工作的Bootstrap Tooltip（包含动画、字号等样式）失效，已修改所有带~/的脚本路径
• 浏览器Network面板显示jQuery、Bootstrap脚本均正常加载（状态码200），验证脚本确认Bootstrap和jQuery已成功加载，执行$('[data-toggle="tooltip"]').tooltip()后，Tooltip仍无正常样式

现有_Layout中的脚本代码 #

<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/site.js" asp-append-version="true"></script>
<script src="_framework/blazor.server.js" defer></script>
<script>
    $(function () {
        if (typeof ($.fn.popover) == 'function') {
            console.log('Bootstrap is working');
        }
        if (typeof jQuery == 'undefined') {
            console.log('jQuery not working');
        }
        console.log('Script executed.');
        $('[data-toggle="tooltip"]').tooltip()
    })
</script>

解决方案 #

1. 检查Bootstrap CSS路径 #

确认Bootstrap CSS文件的引用路径是否受<base>标签影响，比如原~/lib/bootstrap/dist/css/bootstrap.min.css需改为lib/bootstrap/dist/css/bootstrap.min.css，并在Network面板验证CSS文件是否200加载。

2. 指定Tooltip容器 #

Blazor Server的DOM更新可能与jQuery Tooltip存在冲突，初始化时指定容器为body避免样式被覆盖：

$('[data-toggle="tooltip"]').tooltip({
    container: 'body'
});

3. 修正base标签路径 #

使用ASP.NET的Url.Content生成正确的绝对路径，避免相对路径解析异常：

<base href="@Url.Content("~/")" />

4. 自定义Tooltip样式（备选） #

如果上述方法无效，可自定义CSS覆盖默认样式：

/* 自定义Tooltip基础样式 */
.tooltip {
    font-size: 14px;
    opacity: 1 !important;
    transition: opacity 0.2s ease; /* 动画效果 */
}
/* Tooltip内容区 */
.tooltip-inner {
    background-color: #2c3e50;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
}
/* Tooltip箭头（根据方向调整，这里以上方为例） */
.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #2c3e50 !important;
}

内容的提问来源于stack exchange，提问作者Andrеw