Question

我正在尝试创建一些非常基本的工具提示，但我在计算这些应该用一些JavaScript进入的确切位置时遇到了麻烦。想要一个固定位置的原因是，只要存在隐藏溢出等，就确保这些工作正常。

到目前为止，这是我的代码：

var overflowTooltip = function (elem) {

    let legendRow = elem.currentTarget.getBoundingClientRect();
    let tooltip = elem.currentTarget.children[2];
    let topPosition;
    let leftPosition;

    if ((elem.currentTarget.offsetWidth < elem.currentTarget.scrollWidth) && tooltip !== undefined) {

        tooltip.classList.add('total-opacity');

        $timeout(function () {
            if (tooltip.offsetHeight > 35) {
                topPosition = (legendRow.top - tooltip.offsetHeight / 4) - 65;
            } else {
                topPosition = legendRow.top - 65;
            }

            leftPosition = (legendRow.left + elem.currentTarget.offsetWidth) / 2;

            tooltip.style.left = leftPosition + 'px';
            tooltip.style.top = topPosition + 'px';

            $timeout(function () {
                tooltip.classList.remove('total-opacity');
            }, 400)

        }, 100);
    } else {
        elem.currentTarget.children[2].style.left = '-9999px';
    }

}

还有一些SASS：

    .custom-tooltip {
        font-family: $brand-font-condensed;
        font-size: 14px;
        font-weight: 400;
        position: fixed;
        text-align: left;
        overflow: visible !important;
        background-color: rgba($dark-gray, 0.95);
        color: #fff;
        height: auto;
        padding: 7px 10px;
        z-index: 9000;
        visibility: hidden;
        opacity: 0;
        border-radius: 2px;
        box-shadow: 0 2px 5px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
        @include transition (.2s ease-in);
        left: -9999px;
        &:hover {
            visibility: visible;
            opacity: 1;
            @include transition (.2s ease-out);
            -webkit-transition-delay: .3s;
            transition-delay: .3s;
        }
    }

以上作品但并不完美。如果我想改变它的位置，它出现在左，右，下。我不得不做一些重构。如果工具提示的高度更大或更小，则位置会发生变化，如果我向上或向下滚动，工具提示会在屏幕上停留几秒钟。很多这些小细节非常烦人。

目前对使用插件和jQuery不感兴趣。感谢您的任何建议或反馈：）

完美定位的工具提示，位置：固定

0 个答案: