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

bjoukhadar — Fri, 03 Feb 2017 15:49:05 GMT

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-cell-renderer/
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!

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

worshamn — Tue, 06 Nov 2018 19:48:21 GMT

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:

The blog mentioned: https://www.splunk.com/blog/2014/01/29/add-a-tooltip-to-simple-xml-tables-with-bootstrap-and-a-custom-cell-renderer.html
This Splunk answer for the hidden field: https://answers.splunk.com/answers/592103/how-can-i-show-multiple-values-on-a-tooltip-from-a.html
The “Table Row Highlighting” example from the Splunk Dashboard Examples app: https://splunkbase.splunk.com/app/1603/
And various jquery examples found throughout stackovervflow.com

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:

topic Re: How to show a hidden field in a tooltip when I hover over rows in the table? in Splunk Search

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

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