js、jquery手写进度条提示信息

<style>
    .data-tooltip-box {
        margin: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
        background-color: #7ACD71;
        height: 50px;
        position: relative;
    }
 
    .data-tooltip {
        position: relative;
        z-index: 1002;
        cursor: pointer;
        height: 100%;
    }
 
    /* Position tooltip above the element */
    .data-tooltip:before {
        position: absolute;
        bottom: 100%;
        left: var(--before-left, 0); /* 使用 CSS 变量来动态设置 left */
        margin-bottom: 10px;
        padding: 7px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        background-color: #000;
        background-color: hsla(0, 0%, 20%, 0.9);
        color: #fff;
        content: attr(data-tooltip);
        text-align: center;
        font-size: 10px;
        line-height: 1.5;
        white-space: normal;
        z-index: 999;
    }
 
    /* Triangle hack to make tooltip look like a speech bubble */
    .data-tooltip:after {
        position: absolute;
        left: var(--after-left, 0); /* 使用 CSS 变量来动态设置 left */
        bottom: 100%;
        margin-bottom: 5px;
        width: 0;
        border-top: 5px solid #000;
        border-top: 5px solid hsla(0, 0%, 20%, 0.9);
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        content: " ";
        font-size: 0;
        line-height: 0;
    }
 
    .wait {
        background-color: #FFA900;
    }
 
    .prepare {
        background-color: #4693FF;
    }
 
    .halt {
        background-color: #FA6E6D;
    }
 
    .clean {
        background-color: #E7C56D;
    }
</style>
<div class="data-tooltip-box">
   <div class="data-tooltip wait" style="width: 3.33%; position: absolute; left: 0%;" data-tooltip="待机08:00~08:32"></div>
   <div class="data-tooltip prepare" style="width: 4.69%; position: absolute; left: 3.33%;" data-tooltip="生产准备08:32~09:17"></div>
   <div class="data-tooltip halt" style="width: 1.25%; position: absolute; left: 15%;" data-tooltip="异常停机10:24~10:36"></div>
   <div class="data-tooltip clean" style="width: 3.33%; position: absolute; left: 40%;" data-tooltip="清洗14:24~14:56"></div>
</div>复制

$(document).ready(function () {
    setTimeout(function () {	//使用延迟，是为了解决某些动态生成场景下width()方法获取不到width的问题。
        let element;
        let offset = 5;	//偏移量，用于修正位置
        let beforeWidth;
        let newLeftValue;
        let afterValue;
        // 点击按钮时动态改变元素的 ::before 内容
        $('.data-tooltip').each(function () {
            element = this;
            beforeWidth = parseFloat(window.getComputedStyle(this, '::before').width);
            newLeftValue = 0 - Math.abs(($(this).width() - beforeWidth) / 2 - offset);
            afterValue = $(this).width() / 2 - offset;
            element.style.setProperty('--before-left', `${newLeftValue}px`);
            element.style.setProperty('--after-left', `${afterValue}px`);
        });
    }, 100)
});复制

效果图