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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...