Tooltips with rich HTML content does not help in creating desired UI?

Question

I have an XYChart with data object like

chart.data = [{
        "Area": "Korangi",
        "AreaNumber": 120,
        "SubArea": [{
            "SubAreaName": "Korangi-1",
            "SubAreaNumber": 60

        }, {
                "SubAreaName": "Korangi-2",
                "SubAreaNumber": 60

            }
        ]
    }];

and a series tooltipHTML adapter as

series.tooltipHTML = `<center><strong> {Area}:</strong>
        <strong> {AreaNumber}%</strong></center>
        <hr />`;

    series.adapter.add("tooltipHTML",
        function (html, target) {
            if (
                target.tooltipDataItem.dataContext &&
                target.tooltipDataItem.dataContext.SubArea &&
                target.tooltipDataItem.dataContext.SubArea.length
            ) {
                var nameTalClientsNumberCells = "";
                Cells = "";
                target.tooltipDataItem.dataContext.SubArea.forEach(part => {
                    if (part.SubAreaName != null) {
                        nameTalClientsNumberCells +=
                            `<tr><td><strong>${part.SubAreaName}</strong>:&nbsp ${part
                            .SubAreaNumber}%</td></tr>`;
                    }
                    //TalClientsNumberCells += `<td>${part.SubAreaNumber}</td>`;
                });
                html += `<table>
    ${nameTalClientsNumberCells}
</table>`;
            }

            return html;
        });

For I have tried bootstrap classes but non of them works in tooltipHTML.

what I want is like this

but I tried so far is like this

Please help or refer if there is another way of adding really rich HTML in tooltip

A link to the codepen

Answer 1

What you're doing is fine. I just didn't see you used any bootstrap4 css class. You can achieve what you want with either bootstrap4 built-in classes, or your own custom styles.

//I don't need to set tooltipHTML since I have the adapter hook up to return 
// custom HTML anyway

/*
series.tooltipHTML = `<center><strong> {Area}:</strong>
        <strong> {AreaNumber}%</strong></center>
        <hr />`;
*/

series.adapter.add("tooltipHTML", function (html, target) {
    let data = target.tooltipDataItem.dataContext;
    if (data) {
        let html = `
            <div class="custom-tooltip-container">
                <div class="col-left">
                    <h5>${data.Area}</h5>
                    <ul class="list-unstyled">
                    ${data.SubArea.map(part =>
                    `
                        <li class="part">
                            <span class="name">${part.SubAreaName}</span>
                            <span class="area">${part.SubAreaNumber}%</span>
                        </li>
                    `
                    ).join('')}
                    </ul>
                </div>
                <div class='col-right'>
                    <span class="badge badge-pill badge-success">${data.AreaNumber}%</span>
                </div>
            </div>
        `;

        return html;
    }

    return '';
});

And here is the custom styles:

#chart {
    height: 31rem;
}

.custom-tooltip-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    min-width: 13rem;
}

.custom-tooltip-container .col-left {
    width: 70%;
}

.custom-tooltip-container .col-right {
    width: 30%;
    text-align: center;
}

.custom-tooltip-container .col-right .badge {
    font-size: 1.1rem;
}

.custom-tooltip-container .part {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

Again, you can do whatever you want. Here as demo I just quickly put things together.

demo: https://jsfiddle.net/davidliang2008/6g4u2qw8/61/