AEM 6 - Touch UI Assets Console show Tooltip for Cards

Goal

Extend Assets Console to show tooltip with sub folder names on mouse over. A sample Coral tooltip CUI.Tooltip({})

Demo | Package Install

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/touchui-show-tooltip

2 Create node /apps/touchui-show-tooltip/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.gui.damadmin.admin

3) Create file (nt:file) /apps/touchui-show-tooltip/clientlib/js.txt and add

                       tooltip.js

4) Create file (nt:file) /apps/touchui-show-tooltip/clientlib/tooltip.js and add the following code.

(function (document, $) {
    "use strict";

    var SITE_ADMIN_TREE = "/bin/wcm/siteadmin/tree.json";

    $(document).on("foundation-contentloaded", function(e){
        var addSubFoldersToTooltip = function(data){
            var subFolders = [];

            $.each(data, function(i, f) {
                subFolders.push(f["text"]);
            });

            if(subFolders.length == 0){
                subFolders.push("No Sub Folders");
            }

            return "<div style='display: block;'>" +
                "<span style='font-family:adobe-clean; font-weight: bold'>" + subFolders.join("<USE_BR_HERE>") + "</span></div>";
        };

        var getSubFolders = function (folderPath) {
            return $.ajax({
                url: SITE_ADMIN_TREE,
                data: { path: folderPath },
                dataType: "json",
                async: false,
                type: 'GET'
            });
        };

        var assets = $("article.foundation-collection-item");

        assets.each(function(index, card){
            var $card = $(card);

            $card.one('mouseenter', function () {
                var $this = $(this);

                var tooltip = new CUI.Tooltip({
                    type: "info",
                    target: $(card),
                    content: (function(){
                        var html;

                        getSubFolders($this.data("path")).done( function(data){
                            html = addSubFoldersToTooltip(data);
                        });

                        return html;
                    })(),
                    arrow: "left",
                    interactive: true
                });
            });
        });
    });
})(document, Granite.$);