按钮旁边的 ASP.NET Core 工具提示

Question

我正在做一个 ASP.NET Core MVC 应用程序。

我有一个图像按钮，它有这样的工具提示

<div class="col-md-1 tooltips" style="margin-left:0px; padding-left:0px">
    <span class="t-question-circle-SurfieGreen"></span>
    <span class="tooltiptext">
        <pre class="pre-font-family" style="white-space: pre-line;">Consult with your Implementation Manager / Service Delivery Manager
                prior to selecting SOMETHING.... 
</pre>
    </span>
</div>

这是我的CSS

.tooltips {
    width: fit-content
}

    .tooltips .tooltiptext {
        visibility: hidden;
        width: 33rem;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        font-size: 14px;
        position: absolute;
        z-index: 1;
        top: 30%;
        left: 60%;
        margin-left: -60px;
    }

this

css

从顶部显示工具提示 30%...有效..

我遇到的问题是我在页面的不同位置都有这个工具提示。而且页面有ScrollBar。

对于我在页面末尾的那个工具提示。没有看到工具提示。

我想在图片旁边显示工具提示。我必须如何定义我的CSS？或者我必须使用 jQuery 吗？

谢谢