Dashboards & Visualizations

Add tool tip to splunk table headers only

Chinmai
Explorer

Hi,

Can anyone tell me how to add tooltip to splunk table headers?

i have headers like header1, header2, header3. i want to show different tooltips for each headers.

i got to know about adding tooltip to table data (https://community.splunk.com/t5/Dashboards-Visualizations/Can-tooltip-be-used-on-Splunk-table-header... ), but using that i am not able to add tooltip to table headers.

Thanks,

@kamlesh_vaghela  @niketn 

Labels (1)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Chinmai 

Can you please try this?

 

XML:

 

<dashboard script="table_header_tooltip.js">
  <label>Table Header Tooltip</label>
  <row>
    <panel>
      <table id="tbl1">
        <search>
          <query>| makeresults count=5 |eval a=1 | accum a | eval "Header 1"="Hello "+a</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</dashboard>

 

 

table_header_tooltip.js

 

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

    console.log("Hie 1");
    mvc.Components.get('tbl1').getVisualization(function(tableView) {
        tableView.on('rendered', function() {
            console.log("on rendered");
            tableView.$el.find(`[data-sort-key='Header 1']`).find("a").attr({
                "data-toggle": "tooltip",
                "data-placement": "left",
                "title": "My Tool Tip Value 1"
            });
            tableView.$el.children('[data-toggle="tooltip"]').tooltip();
            tableView.table.render();
        });
    });
});

 

 

Output:

 

Screenshot 2021-05-28 at 6.44.32 PM.png

Thanks
KV
▄︻̷̿┻̿═━一

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

View solution in original post

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Chinmai 

Can you please try this?

 

XML:

 

<dashboard script="table_header_tooltip.js">
  <label>Table Header Tooltip</label>
  <row>
    <panel>
      <table id="tbl1">
        <search>
          <query>| makeresults count=5 |eval a=1 | accum a | eval "Header 1"="Hello "+a</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</dashboard>

 

 

table_header_tooltip.js

 

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

    console.log("Hie 1");
    mvc.Components.get('tbl1').getVisualization(function(tableView) {
        tableView.on('rendered', function() {
            console.log("on rendered");
            tableView.$el.find(`[data-sort-key='Header 1']`).find("a").attr({
                "data-toggle": "tooltip",
                "data-placement": "left",
                "title": "My Tool Tip Value 1"
            });
            tableView.$el.children('[data-toggle="tooltip"]').tooltip();
            tableView.table.render();
        });
    });
});

 

 

Output:

 

Screenshot 2021-05-28 at 6.44.32 PM.png

Thanks
KV
▄︻̷̿┻̿═━一

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

Chinmai
Explorer

i added exactly your code to my local splunk. But i am getting 404 not found error. @kamlesh_vaghela 

 

Chinmai_0-1622211309385.png

 

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust
where you added table_header_tooltip.js?
0 Karma

Chinmai
Explorer

added by goin to manage apps, edit properties, add file from UI. file will go to appserver/static folder

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust
cool.. Just open below link and bump the version.

https://localhost:8000/en-US/_bump
0 Karma
Get Updates on the Splunk Community!

Enterprise Security Content Update (ESCU) | New Releases

In December, the Splunk Threat Research Team had 1 release of new security content via the Enterprise Security ...

Why am I not seeing the finding in Splunk Enterprise Security Analyst Queue?

(This is the first of a series of 2 blogs). Splunk Enterprise Security is a fantastic tool that offers robust ...

Index This | What are the 12 Days of Splunk-mas?

December 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...