先帮你拆解下遇到的两个核心问题，然后给出针对性的解决方案：

1. Tooltip被导航栏元素遮挡的问题 #

你之前调整.tooltiptext的z-index没生效，核心原因是堆叠上下文的限制：每个.nav-item.tooltip都是position: relative，它们各自形成了独立的堆叠上下文。哪怕你给子元素.tooltiptext设再高的z-index，它也只能在父元素的堆叠上下文里排序，而后面的.nav-item会默认覆盖前面的，所以tooltip会被遮挡。

解决方案： #

给hover状态的.nav-item.tooltip设置更高的z-index，让它整个堆叠上下文优先级高于其他导航项，这样它的子元素tooltip就能显示在最上层：

.tooltip {
  position: relative;
  display: inline-block;
  opacity: 1 !important;
  /* 给父元素默认一个基础z-index，hover时提升 */
  z-index: 1;
}

.tooltip:hover {
  /* hover时把当前导航项的堆叠层级拉高 */
  z-index: 9999;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 400px;
  background-color: $TrigDarkBlue;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  position: absolute;
  top: -5px;
  left: 5%;
  /* 子元素在父元素的堆叠上下文里设高z-index */
  z-index: 10;
  
  a {
    color: $TrigBlue;
  }
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent $TrigDarkBlue transparent transparent;
}

2. Bootstrap Tooltip无法渲染HTML的问题 #

你用data-toggle='tooltip'搭配@Html.Raw()没生效，是因为Bootstrap Tooltip默认会转义HTML内容，需要显式开启html: true选项。

解决方案： #

在页面初始化时通过JS配置Tooltip的html参数为true，同时确保title属性里的HTML内容正确传递：

HTML部分（简化）：

<li class="nav-item">
  <a class="nav-link active" data-toggle="tooltip" title="@Html.Raw(UIMessages.TTSignUp)" href="#">
    <i class="fal fa-pound-sign"></i><span>PENSION</span>
  </a>
</li>

JS初始化代码：

$(function() {
  // 初始化所有tooltip，开启HTML渲染
  $('[data-toggle="tooltip"]').tooltip({
    html: true,
    placement: 'top'
  });
});

这样Bootstrap就能正确解析title里的HTML内容了，不需要自己维护自定义的tooltip结构。

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