Archive

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

Explorer

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
alt text

Tags (1)
0 Karma
1 Solution

SplunkTrust
SplunkTrust

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

View solution in original post

SplunkTrust
SplunkTrust

@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.
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

SplunkTrust
SplunkTrust

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

View solution in original post

Explorer

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

0 Karma

SplunkTrust
SplunkTrust

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

0 Karma

Explorer

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

0 Karma

SplunkTrust
SplunkTrust

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

0 Karma