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!

New in Observability - Improvements to Custom Metrics SLOs, Log Observer Connect & ...

The latest enhancements to the Splunk observability portfolio deliver improved SLO management accuracy, better ...

Improve Data Pipelines Using Splunk Data Management

  Register Now   This Tech Talk will explore the pipeline management offerings Edge Processor and Ingest ...

3-2-1 Go! How Fast Can You Debug Microservices with Observability Cloud?

Register Join this Tech Talk to learn how unique features like Service Centric Views, Tag Spotlight, and ...