topic Re: How can I show multiple values on a tooltip from a table? in Dashboards & Visualizations

How can I show multiple values on a tooltip from a table?

japposadas — Thu, 23 Nov 2017 01:47:50 GMT

Hi guys, need help here, I have a table with multiple values, when I hover to a column I need to display other field values. how could I do it. I've already created a table like this https://www.splunk.com/blog/2014/01/29/add-a-tooltip-to-simple-xml-tables-with-bootstrap-and-a-custom-cell-renderer.html by Jason Conger. I just need to display more data.

Here's my table screenshot

Re: How can I show multiple values on a tooltip from a table?

kamlesh_vaghela — Thu, 23 Nov 2017 07:59:06 GMT

Hi @japposadas,

Have you successfully implemented tooltip from this URL?

https://www.splunk.com/blog/2014/01/29/add-a-tooltip-to-simple-xml-tables-with-bootstrap-and-a-custom-cell-renderer.html

In this example, the tooltip will show only message field value.
As per your requirement, you want to display other field data in tooltip.like, on message column the tooltip should be eg. message2 field.

Can you please try below changes in your implemented tooltip from above URL.

Change in your search.

YOUR_SEARCH | table message message2 | eval message = message."#####".message2

Change in javascript.

render: function($td, cell) {
    var message = cell.value.split("#####")[0];
    var tip = cell.value.split("#####")[1];

    if(message.length > 48) { message = message.substring(0,47) + "..." }

    $td.html(_.template('<a href="#" data-toggle="tooltip" data-placement="left" title="<%- tip%>"><%- message%></a>', {
        tip: tip,
        message: message
    }));

    // This line wires up the Bootstrap tooltip to the cell markup
    $td.children('[data-toggle="tooltip"]').tooltip();
}

In above changes, I have passed message and message2 fields in single field message by changing in search and used in javascript.

| eval message = message."#####".message2

You can see in updated javascript code.

var message = cell.value.split("#####")[0];
var tip = cell.value.split("#####")[1];

I hope this will help you.

Happy Splunking

Re: How can I show multiple values on a tooltip from a table?

japposadas — Fri, 24 Nov 2017 09:07:44 GMT

Hi kamlesh_vaghela! thanks for your answer. i've already tried it and it work. 🙂 my problem is I used timechart so my header is date spanned by 1 day. do you have any idea how to get the search results and put it in the cells[ ]? thank you so much

Re: How can I show multiple values on a tooltip from a table?

kamlesh_vaghela — Fri, 24 Nov 2017 10:40:50 GMT

Yes, you can use foreach command to append column name as a value in each cell.

It is something like

| foreach "*" [ eval <<MATCHSTR>>='<<FIELD>>'."#####"."<<FIELD>>" ]

Please check the link:
https://docs.splunk.com/Documentation/SplunkCloud/6.6.3/SearchReference/Foreach

Happy Splunking

Re: How can I show multiple values on a tooltip from a table?

japposadas — Mon, 27 Nov 2017 02:46:45 GMT

Hi kamlesh! how thanks again. i have a question. how can you get all the table headers using javascript?

Re: How can I show multiple values on a tooltip from a table?

niketn — Mon, 27 Nov 2017 05:19:34 GMT

@japposadas, Looking at your data you should give ** Punchcard Custom Visualization ** (https://splunkbase.splunk.com/app/3129/) a try. It will give you a lot of hover options:

1) Hover any value
2) Hover over column to see value of all rows based on selected column
3) Hover over row to see values of all columns for selected row
4) Hover over legend to see all values falling in Legend range.
5) Size and Color of bubbles will both give you a sense of volume of data.

Re: How can I show multiple values on a tooltip from a table?

kamlesh_vaghela — Mon, 27 Nov 2017 18:54:54 GMT

Hi Hi @japposadas, where you want to access table headers in javascript?? In render function? And what is the purpose of same?

Re: How can I show multiple values on a tooltip from a table?

spkriyaz — Thu, 18 Mar 2021 18:06:55 GMT

Hi @kamlesh_vaghela,

Can this tooltip changes be applied to heatmap tooltip? I have only xaxis and yaxis value in the heatmap tooltip when I hover the heatmap blocks like below. Is it possible to add more fields to this tooltip? I have extra fields values that needs to populated like minutes, process name etc.

Could you please advice on the same? I have posted a question please refer this

https://community.splunk.com/t5/Dashboards-Visualizations/How-to-display-more-values-in-heatmap-tooltip/m-p/544059#M37312

Thanks in advance!