Removing share text from d3plus tooltip

Question

How can I remove the share text that pops up in the tooltip of d3plus. I want the share button removed from the tooltip. Its quite meaningless to me, is there a way to remove it from the tooltip. Below is my existing code.

        new d3plus.Treemap()
        .select("#viz")
        .data(data)
        .groupBy("id")
        .on("click", function (d) {
            bootbox.alert({
                title: d.id,
                message: "<table class='tooltip-table'>"
                    + "<tr><td class='title'> Number of Businesses</td><td class='data'>" + d.numberpercategory + "</td></tr>"
                    + "<tr><td class='title'> Number of Sub Categories</td><td class='data'>" + d.numberpersubcategory + "</td></tr>"
                    + "<tr><td class='title'> Revenue Generated</td><td class='data'>" + 'N' + parseFloat(d.value) + "</td></tr>"
                    + "</table>",

                callback: function (result) {
                    console.log('Error is: ' + result);
                }
            }).find('.modal-content').css({
                'background-color': '#212831',
                'color': 'white',
                'font-size': '1em',
                'margin-top': function () {
                    var w = $(window).height();
                    var b = $(".modal-dialog").height();
                    // should not be (w-h)/2
                    var h = (w - b) / 2;
                    return h + "px";
                }
            });
        })
        .tooltipConfig({
            body: function (d) {
                var table = "<table class='tooltip-table'>";
                table += "<tr><td class='title'> Number of Businesses</td><td class='data'>" + d.numberpercategory + "</td></tr>";
                table += "<tr><td class='title'> Number of Sub Categories</td><td class='data'>" + d.numberpersubcategory + "</td></tr>";
                table += "<tr><td class='title'> Revenue Generated</td><td class='data'>" + d.percent+'%'+ "</td></tr>";

                table += "</table>";
                return table;
            },
            footer: function (d) {
                return "<sub class='tooltip-footer'>d.id</sub>";
            },
            title: function (d) {
                var txt = d.id;
                return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
                ;
            },

        })

Answer 1

Try adding tbody to the tooltipConfig like this:

.tooltipConfig({
    body: function (d) {
            var table = "<table class='tooltip-table'>";
            table += "<tr><td class='title'> Number of Businesses</td><td class='data'>" + d.numberpercategory + "</td></tr>";
            table += "<tr><td class='title'> Number of Sub Categories</td><td class='data'>" + d.numberpersubcategory + "</td></tr>";
            table += "<tr><td class='title'> Revenue Generated</td><td class='data'>" + d.percent+'%'+ "</td></tr>";

            table += "</table>";
            return table;
        },
    footer: function (d) {
        return "<sub class='tooltip-footer'>d.id</sub>";
    },
    tbody: function(d) {
        const table = [];
        return table;
    },
    title: function (d) {
        var txt = d.id;
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    }
})

The tbody method allows you to overwrite the default tooltip config of d3plus. You can also use the tbody method to build tooltips more easily. In your case you can set tbody like this:

.tooltipConfig({
    footer: function (d) {
        return "<sub class='tooltip-footer'>d.id</sub>";
    },
    tbody: function(d) {
        const table = [
            ["Number of Businesses", d.numberpercategory],
            ["Number of Sub Categories", d.numberpersubcategory],
            ["Revenue Generated", `${d.percent}%`]
        ];
        return table;
    },
    title: function (d) {
        var txt = d.id;
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    }
})

That will overwrite the default tooltip config and build the same tooltip that you was using.