SOURCE

const data = [
    {
        arr: [
            {
                label: 'disaster',
                value: 0
            },
            {
                label: 'high',
                value: 0
            },
            {
                label: 'average',
                value: 0
            }
        ],
        label: "Primera",
    },
    {
        arr: [
            {
                label: 'disaster',
                value: 0
            },
            {
                label: 'high',
                value: 0
            },
            {
                label: 'average',
                value: 1
            }
        ],
        label: "Isilon",
    },
    {
        arr: [
            {
                label: 'disaster',
                value: 3
            },
            {
                label: 'high',
                value: 2
            },
            {
                label: 'average',
                value: 1
            }
        ],
        label: "Brocade",
    },
    {
        arr: [
            {
                label: 'disaster',
                value: 3
            },
            {
                label: 'high',
                value: 2
            },
            {
                label: 'average',
                value: 1
            }
        ],
        label: "Vplex",
    },
    {
        arr: [
            {
                label: 'disaster',
                value: 3
            },
            {
                label: 'high',
                value: 2
            },
            {
                label: 'average',
                value: 1
            }
        ],
        label: "VNX",
    },
    {
        arr: [
            {
                label: 'disaster',
                value: 3
            },
            {
                label: 'high',
                value: 2
            },
            {
                label: 'average',
                value: 1
            }
        ],
        label: "Unity",
    }
]

<ul>
    <li>
        <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim tenetur
            expedita, autem iste tempore fmodi placeat beatae voluptate quoseum elit
            voluiye hfisehf tenetur opeds sjvnfs
        </div>
    </li>
</ul>

body{
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #333;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}
li {
    position: relative;
    width: 20px;
    height: 20px;
    background-color: #777777;
    border-radius: 50%;
    transition: .5s;
    cursor: pointer;
}
li .content{
    position: absolute;
    bottom: 55px;
    width: 400px;
    left: -180px;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 4px;
    /* visibility: hidden; */
    opacity: 1;
    /* transition: .5s; */
    background-image: linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
    box-shadow: 0 0 4px aliceblue;
    color: transparent;
    /* 设置字体颜色透明 */
    -webkit-background-clip: text;
}
/* 下箭头 */
li .content::before,
li .content::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border: 20px solid transparent;
    left: 170px;
}
/* 修改箭头填充颜色 */
li .content::before {
    border-top-color: #fff;
    bottom: -40px
}
li .content::after {
    border-top-color: #333;
    bottom: -37px
}
/* 鼠标移动上去的颜色变换 */
/* li:hover {
    background-color: #86ff3b;
    box-shadow: 0 0 4px #333, 0 0 6px #86ff3b;
} */
/* li:hover .content {
    animation: ani .5s forwards;
} */
/* @keyframes ani {
    0% {
        opacity: 1;
        visibility: hidden;
        transform: translateY(-100px)
    }
    100% {
        opacity: 1;
        visibility: visible;
        transform: translateY(0)
    }
} */