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 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

Splunk is officially part of Cisco

Revolutionizing how our customers build resilience across their entire digital footprint.   Splunk ...

Splunk APM & RUM | Planned Maintenance March 26 - March 28, 2024

There will be planned maintenance for Splunk APM and RUM between March 26, 2024 and March 28, 2024 as ...