JSFiddle - React, Tailwind, and code Playground

by TTrain

HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<body style="text-align:center;">

<h2>Bottom Tooltip</h2>
<p>Move the mouse over the text below:</p>

<i class="material-icons tooltip" data-toggle="tooltip" ng-click="view(application._id)">receipt
                                                    <span class="tooltiptext">Tooltip text</span></i>&nbsp;&nbsp;

</body>

CSS

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

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

.tooltip:hover .tooltiptext {
    visibility: visible;
}