Dashboards & Visualizations

Can i have a tool tip for several headers on a table

robertlynch2020
Motivator

Hi 

I have a table like below and I am looking to have a tooltip for several of its columns.

I have looked at some solutions on questions, but nothing seems to answer this one correctly.

Any ideas?

robertlynch2020_0-1626795311134.png

Regards

Robert Lynch

 

Labels (1)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@robertlynch2020 

Can you please try this?

<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"
            });
            console.log(tableView.$el.children('[data-toggle="tooltip"]'));
            tableView.$el.children('[data-toggle="tooltip"]').tooltip();
            tableView.table.render();

        });
    });
});

 

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

@robertlynch2020 

Can you please try this?

<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"
            });
            console.log(tableView.$el.children('[data-toggle="tooltip"]'));
            tableView.$el.children('[data-toggle="tooltip"]').tooltip();
            tableView.table.render();

        });
    });
});

 

Thanks
KV
▄︻̷̿┻̿═━一   ?

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

 

robertlynch2020
Motivator

Wonderfull - thanks very much.

  Also for other people if you want to add multiple columns 

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"
            });
            console.log(tableView.$el.children('[data-toggle="tooltip"]'));
            tableView.$el.children('[data-toggle="tooltip"]').tooltip();
            tableView.table.render();

        });
    });
});

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 2']`).find("a").attr({
                "data-toggle": "tooltip",
                "data-placement": "left",
                "title": "My Tool Tip Value 1"
            });
            console.log(tableView.$el.children('[data-toggle="tooltip"]'));
            tableView.$el.children('[data-toggle="tooltip"]').tooltip();
            tableView.table.render();

        });
    });
});

 

 

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@robertlynch2020 

You have to just add one block like this.,

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.find(`[data-sort-key='Header 2']`).find("a").attr({
                "data-toggle": "tooltip",
                "data-placement": "left",
                "title": "My Tool Tip Value 2"
            });
            console.log(tableView.$el.children('[data-toggle="tooltip"]'));
            tableView.$el.children('[data-toggle="tooltip"]').tooltip();
            tableView.table.render();

        });
    });
});

Thanks
KV
▄︻̷̿┻̿═━一   ?

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

Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...