topic Re: Can i have a tool tip for several headers on a table in Dashboards & Visualizations

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

robertlynch2020 — Tue, 20 Jul 2021 15:37:34 GMT

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

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

kamlesh_vaghela — Wed, 21 Jul 2021 11:21:54 GMT

@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

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

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

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

robertlynch2020 — Wed, 21 Jul 2021 13:14:37 GMT

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

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

kamlesh_vaghela — Wed, 21 Jul 2021 13:17:47 GMT

@robertlynch2020

You have to just add one block like this.,

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

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

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

Vasulaxnik — Fri, 05 Apr 2024 11:15:39 GMT

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

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

kamlesh_vaghela — Mon, 08 Apr 2024 06:02:15 GMT

@Vasulaxnik

Can you please share your sample code and JS?

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