Bottom arrow example

Write code here

J | B | A

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

.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;
            bottom: 150%;
            left: 50%;
            margin-left: -60px;
        }

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

.tooltip:hover .tooltiptext {
            visibility: visible;
        }
</style>
    </head>
<body>
    <h2>Top Tooltip w/ Bottom Arrow</h2>
    <div class="tooltip">
        <button type="button">Place Mouse to get tooltip arrow</button>
        <span class="tooltiptext">Tooltip text</span>
    </div>
</body>
</html>

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

Bottom Arrow

Write code here

Output