Dashboards & Visualizations

How can I display hidden fields in a tooltip?

mattysherve
New Member

Hi,

I'd like to display a tooltip when someone hover the values of the first column of my table. This tooltip would display values taken from 3 hidden fields.

My table looks like that :

<table id="tblTooltip">
        <search base="fullKpi">
          <query>
                 table reference,referenceOrder,validation_status
                 </query>
                 <preview>
                   <set token="refOrder">$result.referenceOrder$</set>
                 </preview>
        </search>

        <fields>reference,validation_status</fields>
        <option name="count">10</option>
        <option name="drilldown">none</option>
      </table>

and my JS looks like that:

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 === 'Reference';
        },
        render: function($td, cell) {
            var defaultTokenModel=mvc.Components.get("default");
            var tokenValue = defaultTokenmodel.get("refOrder");
            var message = cell.value;
            var tip = tokenValue;


            $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();
        }
    });

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

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

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

});

I'm trying to display the value of the field referenceOrder when hovering the reference field, however it displays "$result.referenceOrder$ in plain text
alt text

I saw another response (https://answers.splunk.com/answers/495575/how-to-show-a-hidden-field-in-a-tooltip-when-i-hov.html) with a workaround by combining hidden fields into a visible field and then splitting the values inside it, but I'd like to know if there's a way to do it properly ? Another token use or something maybe ?

Any idea is welcome ! 😄

Tags (1)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@mattysherve
For your requirement we can use a trick. 🙂

Can you please try below XML and js code?

XML:

<dashboard script="tooltip.js">
  <label>table tooltip</label>
  <row>
    <panel>
      <table id="tblTooltip">
        <search>
          <query>| makeresults | eval reference="12345",referenceOrder="67890",validation_status="test" |  eval reference=reference."|".referenceOrder | table reference,validation_status</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="refresh.display">progressbar</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</dashboard>

tooltip.js

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 === 'reference';
        },
        render: function($td, cell) {
            var message = cell.value.split("|")[0];
            var tip = cell.value.split("|")[1];


            $td.html(_.template('<a href="#" data-toggle="tooltip" data-placement="right" 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();
        }
    });

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

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

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

});

Thanks

View solution in original post

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@mattysherve
For your requirement we can use a trick. 🙂

Can you please try below XML and js code?

XML:

<dashboard script="tooltip.js">
  <label>table tooltip</label>
  <row>
    <panel>
      <table id="tblTooltip">
        <search>
          <query>| makeresults | eval reference="12345",referenceOrder="67890",validation_status="test" |  eval reference=reference."|".referenceOrder | table reference,validation_status</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="refresh.display">progressbar</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</dashboard>

tooltip.js

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 === 'reference';
        },
        render: function($td, cell) {
            var message = cell.value.split("|")[0];
            var tip = cell.value.split("|")[1];


            $td.html(_.template('<a href="#" data-toggle="tooltip" data-placement="right" 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();
        }
    });

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

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

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

});

Thanks

0 Karma

Vachel
Explorer

Thanks Kamlesh, 

Nice solution and it does work for me ever. 

But this time when I try to reproduce it, it does not work.

I have checked the code and xml both are copied directly from you but really do not work. 

Any experience with this issue? or what setting can I configure, many thanks! 

0 Karma

cblanton
Communicator

Would this work for a timechart? I need to display the value for a field that isn't in the timechart.

0 Karma

mattysherve
New Member

Thanks for the answer, that's what I went with. Even though it feels like a cheap trick, it seems to be the only way to do it !

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