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

[japposadas]

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-custo... by Jason Conger. I just need to display more data.

Here's my table screenshot

[niketn]

@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.

[kamlesh_vaghela · Accepted solution]

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-custo...

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

[spkriyaz]

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-tool...

Thanks in advance!

[japposadas]

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

[kamlesh_vaghela]

HI

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

[japposadas]

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

[kamlesh_vaghela]

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