JSFiddle - React, Tailwind, and code Playground

HTML

<h2>
    </h2>
    <hr />
    <ul class="list">
        <li>1<span class="tooltip">A</span></li>
        <li>2<span class="tooltip">B</span></li>
        <li>3<span class="tooltip">C</span></li>
    </ul>
    <ul class="straight">
        <li>4<span class="tooltip">A</span></li>
        <li>5<span class="tooltip">B</span></li>
        <li>6<span class="tooltip">C</span></li>
    </ul>

    <div class="dvmain"><span>顯示文字</span><span class="tooltip2">tooltip</span></div>

CSS

.list li
        {
            position: relative;
            width: 20px;
            height: 20px;
            display: inline-block;
        }
        
        .straight li
        {
            position: relative;
            width: 20px;
            height: 20px;
        }
        .dvmain
        {
            position: relative;
            width: 65px;
            height: 25px;
        }
        
        .list li .tooltip
        {
            display: none;
            position: absolute;
            bottom: 25px;
            left: -14px;
            width: 30px;
            height: 20px;
            line-height: 20px;
            padding: 3px;
            font-size: 12px;
            text-align: center;
            color: black;
            background: #a2cf3b;
            border: 1px solid #23234a;
            border-radius: 8px;
            text-shadow: rgba(0, 0, 0, 0.09804) 1px 1px 1px;
            box-shadow: rgba(0, 0, 0, 0.09804) 1px 1px 2px 0px;
        }
        
        .straight li .tooltip
        {
            display: none;
            position: absolute;
            bottom: 0px;
            left: 25px;
            width: 30px;
            height: 20px;
            line-height: 20px;
            padding: 3px;
            font-size: 12px;
            text-align: center;
            color: black;
            background: #f7f8f8;
            border: 1px solid #c9caca;
            border-radius: 3px;
            text-shadow: rgba(0, 0, 0, 0.09804) 1px 1px 1px;
            box-shadow: rgba(0, 0, 0, 0.09804) 1px 1px 2px 0px;
        }
        
        li:hover .tooltip,.dvmain:hover .tooltip2
        {
            display: inline-block;
        }
        
        .tooltip2
        {
            display: none;
            position: absolute;
            bottom: 30px;
            left: 5px;
            width: 55px;
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            text-align: center;
           ...