<style>
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  margin-left:180px;
  background-color: blue;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    var listName="Policies and Procedure";
    $(".ms-listviewtable tbody[id^='titl']").each(function(){
        var policies=$(this).text().split(":")[1].split("(")[0].trim();
        var html=getDocuments(listName,policies);
        $(this).find("a").addClass("tooltip");
        $(this).find("a").append(html);
    });
})
function getDocuments(listName,filter){
    var html="<span class='tooltiptext'>";
    $.ajax({
        url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items?$select=FileLeafRef&$filter=Policies eq '"+filter+"'",
        type: "GET",
        async:false,
        headers: {
            "Accept": "application/json;odata=verbose",
        },
        success: function (data) {
            $.each(data.d.results,function(i,item){
                html+="<p>"+item.FileLeafRef+"</p>";
            });
        },
        error: function (data) {
            alert("Error");
        }
    });
    html+="</span>";
    return html;
}
</script>