Tooltip

    <div class="px-6">
        <div class="tooltip left" data-tip="left">
            <button class="button">Hover me</button>
        </div>
        <div class="tooltip" data-tip="top">
            <button class="button">Hover me</button>
        </div>
        <div class="tooltip bottom" data-tip="bottom">
            <button class="button">Hover me</button>
        </div>
        <div class="tooltip right" data-tip="right">
            <button class="button">Hover me</button>
        </div>
    </div>
    

    <div class="tooltip right">
        <div class="tip box p-0">
            <table class="table xs">
                <tbody>
                    <tr>
                        <th class="flex gap-1">
                            <div class="status"></div>
                            Total
                        </th>
                        <th>100</th>
                    </tr>
                    <tr>
                        <th class="flex gap-1">
                            <div class="status success"></div>
                            Online
                        </th>
                        <th>50</th>
                    </tr>
                    <tr>
                        <th class="flex gap-1">
                            <div class="status danger"></div>
                            Offline
                        </th>
                        <th>50</th>
                    </tr>
                </tbody>
            </table>
        </div>
        <button class="button">Hover me</button>
    </div>