Dashboards & Visualizations

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

robertlynch2020
Influencer

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
Influencer

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.

Vasulaxnik
Loves-to-Learn Everything

@kamlesh_vaghela , 
When I add for second column the solution is not working. How is find("a") related? 

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Vasulaxnik 

Can you please share your sample code and JS? 

Or

Let's follow the community best practice create new questions and tag me for new comments and conversations :).

 

KV

0 Karma
Get Updates on the Splunk Community!

Optimize Cloud Monitoring

  TECH TALKS Optimize Cloud Monitoring Tuesday, August 13, 2024  |  11:00AM–12:00PM PST   Register to ...

What's New in Splunk Cloud Platform 9.2.2403?

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

Stay Connected: Your Guide to July and August Tech Talks, Office Hours, and Webinars!

Dive into our sizzling summer lineup for July and August Community Office Hours and Tech Talks. Scroll down to ...