Displaying one column value as tooltip to another column for a table

[AKG1_old1]

Hi,

I am using one table in my dashboard. if possible I wanted to display one column values as tooltip to another column.

basically in below table Threshold value need to be displayed as tooltip when mouse rollover on Alert_Destription or Issues_Count.

[vnravikumar]

Hi

Check @kamlesh_vaghela solution in the below link.

https://answers.splunk.com/answers/705538/how-can-i-display-hidden-fields-in-a-tooltip-1.html

or

<dashboard script="tooltip.js">
  <label>tooltip</label>
  <row>
    <panel>
      <table id="rk">
        <search>
          <query>| makeresults 
| eval Alert_Description="CPU Issues (Avg Over 70% in 10mins)", Issues_Count=0,Threshold=70,Dashboard="CPU" 
| append 
    [| makeresults 
    | eval Alert_Description="GC Issues (Stop the world >= 20%)", Issues_Count=0,Threshold=20,Dashboard="GC"] 
| eval Alert_Description=Alert_Description."##".Threshold,Issues_Count=Issues_Count."##".Threshold 
| table Alert_Description,Issues_Count,Threshold,Dashboard</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</dashboard>

javascript:

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {

    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {

            return _([ 'Alert_Description','Issues_Count']).contains(cell.field);
        },
        render: function($td, cell) {
            var value = cell.value.split("##")[0];
            var tooltip = cell.value.split("##")[1];
            $td.attr('title', tooltip);
            $td.text(value);
           if(cell.field==='Issues_Count'){
                $td.text(value).addClass('numeric');
           }else{
                $td.text(value).addClass('string');
           }
        }
    });
    mvc.Components.get('rk').getVisualization(function(tableView) {
        tableView.table.addCellRenderer(new CustomRangeRenderer());
        tableView.on('rendered', function() {
            tableView.$el.find('td.range-cell').each(function() {
                $(this).parents('tr').addClass(this.className);
            });
        });
        tableView.table.render();
    });
});

[vnravikumar]

Hi @agoyal

Please try the above solutions and let us know.