Skip to content

Move tooltip to icon #624

Closed
Closed
@davaus

Description

@davaus

I am not an experience github user, so I have put this feature request here. I have many different sorts of nodes on the organisational tree that I am coding, so using the tooltip to describe the meaning of the custom icon for that type of node would be useful. I have hacked the code of the fancytree node to do this.
I figured that others may have the same requirement so I have posted the code here. It's quick and dirty 'cause I'm under a deadline. Hope it is useful to someone. It starts after the comment
"//folder or doctype icon"

THIS IS THE EXISTING CODE:

role = aria ? " role='img'" : "";
    if ( icon && typeof icon === "string" ) {
        imageSrc = (icon.charAt(0) === "/") ? icon : ((opts.imagePath || "") + icon);
        ares.push("<img src='" + imageSrc + "' class='fancytree-icon' alt='' />");
    } else if ( node.data.iconclass ) {
        // TODO: review and test and document
        ares.push("<span " + role + " class='fancytree-custom-icon" + " " + node.data.iconclass +  "'></span>");
    } else if ( icon === true || (icon !== false && opts.icons !== false) ) {
        // opts.icons defines the default behavior.
        // node.icon == true/false can override this
        ares.push("<span " + role + " class='fancytree-icon'></span>");
    }
    // node title
    nodeTitle = "";
    // TODO: currently undocumented; may be removed?
    if ( opts.renderTitle ){
        nodeTitle = opts.renderTitle.call(tree, {type: "renderTitle"}, ctx) || "";
    }
    if(!nodeTitle){
        tooltip = node.tooltip ? " title='" + FT.escapeHtml(node.tooltip) + "'" : "";
        id = aria ? " id='ftal_" + node.key + "'" : "";
        role = aria ? " role='treeitem'" : "";
        tabindex = opts.titlesTabbable ? " tabindex='0'" : "";

        nodeTitle = "<span " + role + " class='fancytree-title'" + id + tooltip + tabindex + ">" + node.title + "</span>";
    }
    ares.push(nodeTitle);

THIS IS THE MODIFIED CODE:

    role = aria ? " role='img'" : "";
    if ( icon && typeof icon === "string" ) {
        imageSrc = (icon.charAt(0) === "/") ? icon : ((opts.imagePath || "") + icon);
        _tooltip = node.tooltip || "";_
        ares.push("<img src='" + imageSrc + "' " + " title='" + FT.escapeHtml(tooltip) + "' class='fancytree-icon' alt='' />");
    } else if ( node.data.iconclass ) {
        // TODO: review and test and document
        ares.push("<span " + role + " class='fancytree-custom-icon" + " " + node.data.iconclass +  "'></span>");
    } else if ( icon === true || (icon !== false && opts.icons !== false) ) {
        // opts.icons defines the default behavior.
        // node.icon == true/false can override this
        ares.push("<span " + role + " class='fancytree-icon'></span>");
    }
    // node title
    nodeTitle = "";
    // TODO: currently undocumented; may be removed?
    if ( opts.renderTitle ){
        nodeTitle = opts.renderTitle.call(tree, {type: "renderTitle"}, ctx) || "";
    }
    if(!nodeTitle){
        //tooltip = node.tooltip ? " title='" + FT.escapeHtml(node.tooltip) + "'" : "";
        id = aria ? " id='ftal_" + node.key + "'" : "";
        role = aria ? " role='treeitem'" : "";
        tabindex = opts.titlesTabbable ? " tabindex='0'" : "";

        nodeTitle = "<span " + role + " class='fancytree-title'" + id  + tabindex + ">" + node.title + "</span>";
    }
    ares.push(nodeTitle);

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions