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

[robertlynch2020]

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?

Regards

Robert Lynch

[kamlesh_vaghela · Accepted solution]

@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]

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();

        });
    });
});

[kamlesh_vaghela]

@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]

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

[kamlesh_vaghela]

@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