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