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!

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