Question

我正在使用Bootstrap的工具提示针对显示页面中的某些按钮显示文本。一切工作正常，除了工具提示的显示完全位于页脚下方。例如

以蓝色突出显示的单击按钮应显示“添加新记录”：

下图显示了“在页脚下方添加新记录，而不是显示在按钮本身附近

错误图片：

CSS代码如下：

.tooltip {
    position: absolute;
    z-index: 1070;
    display: inline;
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: .875rem;
    word-wrap: break-word;
    opacity: 0;
    pointer-events: none
}

    .tooltip.show {
        opacity: .9
    }

    .tooltip .arrow {
        position: absolute;
        display: inline;
        width: .8rem;
        height: .4rem
    }

        .tooltip .arrow::before {
            position: absolute;
            content: "";
            border-color: transparent;
            border-style: solid
        }

html看起来像这样

<div class="tooltip fade bs-tooltip-bottom" role="tooltip" id="tooltip785907">
<div class="arrow">
</div>
<div class="tooltip-inner">Add a new record
</div>
</div>

任何指导将不胜感激

Answer 1

工具提示绝对定位在哪个相对定位的元素上？我认为这就是问题所在。您可以显示更多的HTML和CSS吗？

引导工具提示溢出问题导致滑块

1 个答案: