top tooltip arrow example

Write code here

J | B | A

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black;
        }

.tooltip .tooltiptext {
                visibility: hidden;
                width: 120px;
                background-color: black;
                color: #fff;
                text-align: center;
                border-radius: 6px;
                padding: 5px 0;
                position: absolute;
                z-index: 1;
                top: 150%;
                left: 50%;
                margin-left: -60px;
            }

.tooltip .tooltiptext::after {
                    content: "";
                    position: absolute;
                    bottom: 100%;
                    left: 50%;
                    margin-left: -5px;
                    border-width: 5px;
                    border-style: solid;
                    border-color: transparent transparent black transparent;
                }

.tooltip:hover .tooltiptext {
                visibility: visible;
            }
    </style>
</head>
<body style="text-align:center;">

<h2>Bottom Tooltip w/ Top Arrow</h2>
    <div class="tooltip">
        <button type="button">Place the mouse to get the tooltip arrow</button>
        <span class="tooltiptext">Tooltip text</span>
    </div>
</body>
</html>

Note: We DO NOT save your trial code in our database.

Top Tooltip Arrow

Write code here

Output