Custom tooltip for visualizations

#1

Hello, i have some visualizations, and I need to show some custom informtion in the tooltip, I was wondering if it is possible to somehow customize the content shown in the tooltip, using the data that is shown when hovering.

#2

Actually there is a way to do it and it is documented, you can take a look in the tooltips documentation, here is an example:

// Declare the function     
const tooltipBuilder = function (data, originalTooltipHtml, vizConfiguration) {
    const barName = data.name;
    const barMainValue = utils.formatNumericValue(data.value, { 
                            type: 'INTEGER' 
                        });
    const otherMetrics = data.data.current.current.metrics
    const newHtml = `
        <div style="padding: 10px">
            <span style="
                color:${data.color};
                font-weight:bold">
                    ${barName}
            </span>: 
            ${barMainValue}
        </div>`

    // Using the cf tooltip utility here
    cf.tooltip.set(newHtml, data.color);
};

cf.provider('Elastic')
    ...
    // Set the option to the visualization
    .set('customTooltip', tooltipBuilder)
    .execute()
#3

I see, thanks for your help, actually it was very useful