Splunk Search

How to show a hidden field in a tooltip when I hover over rows in the table?

bjoukhadar
New Member

Hi all,

I'm trying to do something like this:
http://blogs.splunk.com/2014/01/29/add-a-tooltip-to-simple-xml-tables-with-bootstrap-and-a-custom-ce...
but for a hidden field.

For example I have a table with two fields: "First Name" & "Last Name" shown in my dashboard, and I have also a hidden column "Address" from the search. My question is how to show the hidden field "Address" in a tooltip when I hover over the rows of the table.

I appreciate any help!

0 Karma

worshamn
Contributor

Disclaimer: I don’t pretend to know a lot about Javascript and have only come to this answer through needing it myself and hacked my way through it. Though considering there is no answer here and I have a working example, I thought it best to share. It is based on a combination of:

I have found that however the behavior is inconsistent on tables that take a long time to load (like from a long search—it has trouble setting the data-toggle value) but otherwise works as expected (maybe someone else will have that issue and provide their fix).

A rough explanation of what I am doing is

  • Combining the “hidden” field into one that can be seen (because it doesn’t seem to be able to use it otherwise) and splitting it apart for use for the tooltip
  • Using the BaseCellRenderer, moving the hidden text from the split into a hidden span section in that cell
  • Then finding that span and setting the parent (row) to have the data-toggle set to tooltip
  • Then setting the tooltip text to match the hidden span’s value

Here is a basic example of what you where mentioning, the dashboard xml and the javascript code.

Dashboard (Note I am going the long way about so that it is hopefully clear about the combining fields):

<dashboard stylesheet="rowtooltip.css" script="rowtooltip.js">
  <init>
    <unset token="search"></unset>
  </init>
  <label>Address Test</label>
  <row>
    <panel>
      <table id="rowtooltip">
        <search>
          <query>| makeresults
| eval combined = "Bruce,Wayne,Gotham City|Clark,Kent,Metropolis|Peter,Parker,New York City"
| eval combined = split(combined, "|")
| mvexpand combined
| rex field=combined "(?<First>[^,]+),(?<Last>[^,]+),(?<Address>[^\$]+)"
| table First Last Address
| eval Last = Last."####".Address
| table First Last</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="count">10</option>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</dashboard>

Javascript:

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {

    var CustomTooltipRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return cell.field === 'Last';
        },
        render: function($td, cell) {

            //split the cell to extract the text for the tooltip and hide it
            var message = cell.value.split('####')[0];
            var tip = cell.value.split('####')[1];

            $td.html(_.template('<%- message%><span style="display:none" class="tip"><%- tip%></span>', {
                message: message,
                tip: tip,
            })); 

            // label the class to find it later
            $td.addClass('carrier-cell');
        }
    });

mvc.Components.get('rowtooltip').getVisualization(function(tableView) {

        // Register custom cell renderer
        tableView.table.addCellRenderer(new CustomTooltipRenderer());

        tableView.on('rendered', function() {
            // Apply class of the cells to the parent row in order to color the whole row
            tableView.$el.find('td.carrier-cell').each(function() {
                // Grab the hidden value from the carrier cell to display in tooltip
                var message = $(this).find('span').html();
                // Set the tool tip on the cell's parent row
                $(this).parents('tr').attr('data-toggle','tooltip').tooltip({title: message, placement: 'top'});
            });
            tableView.$el.find('[data-toggle="tooltip"]').tooltip();
        });

        // Force the table to re-render
        tableView.table.render();        
    });

});

With the result effect being:
alt text

0 Karma
Get Updates on the Splunk Community!

.conf24 | Day 0

Hello Splunk Community! My name is Chris, and I'm based in Canberra, Australia's capital, and I travelled for ...

Enhance Security Visibility with Splunk Enterprise Security 7.1 through Threat ...

 (view in My Videos)Struggling with alert fatigue, lack of context, and prioritization around security ...

Troubleshooting the OpenTelemetry Collector

  In this tech talk, you’ll learn how to troubleshoot the OpenTelemetry collector - from checking the ...