Please can you be able to assist me.

I have been asked to configure a "Group by" link of the document library webpart, so that when users click on the hover on the link, a popup (I dont know how to call it), will appear and display a list of the documents available under that group by link.

The following is the work done:

A document library has been dropped on a page. The view of the Document library was configured and added a Group By in order to group documents by document type.

They have requested that, when you hover on the heading of the ''document type'', a pop up displays and within the pop up box, a list/links to all documents available under that group should be shown WITHOUT 'having to open the group by Document Type link.

I have attached a little diagram.

Please can you help me. If it is not possible, is there any other way I can redesign this page please?

Thanking you so much in advance enter image description here

  • sharepoint on premises, sharepoint online? You can do it by create own WebPart, there is no OOTB function for this, honestly i dont understand why is problem to expand this group, because what happend if there will be more documents than is able to show in the pop up? Jan 23, 2019 at 11:32
  • Hi Zdenek, thanks for the response. It is SharePoint 2013. When there are a lot of documents under the group by, then the popup should have a scroll button. Is there a much more user friendly way to display these documents?
    – Gentille
    Jan 23, 2019 at 12:18
  • For me is the OOTB view with GroupBy the most user-friendly, cause you see here defined columns, links to documents and the mini-menu in (...) for each document. Dont understand why programing something else. Jan 23, 2019 at 12:24

1 Answer 1


We can use jQuery and REST API to achieve it, add the code below into script editor web part in list view page.

.tooltip {
  position: relative;
  display: inline-block;

.tooltip .tooltiptext {
  visibility: hidden;
  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;
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
    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);
function getDocuments(listName,filter){
    var html="<span class='tooltiptext'>";
        url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items?$select=FileLeafRef&$filter=Policies eq '"+filter+"'",
        type: "GET",
        headers: {
            "Accept": "application/json;odata=verbose",
        success: function (data) {          
        error: function (data) {
    return html;

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.