topic Re: Dashboard TOOLTIP in Dashboards & Visualizations

Dashboard TOOLTIP

Eldenhanjoel — Tue, 27 Oct 2020 19:36:34 GMT

Hey,
I am trying to use tooltip in my dashboard can anyone help me out

Re: Dashboard TOOLTIP

richgalloway — Tue, 27 Oct 2020 20:10:51 GMT

Yes, I'm sure there's someone here who can help. First, however, please be more specific about what you need. How exactly are you trying to do it and what are the results? What error message do you get, if any? What documentation are you following?

Re: Dashboard TOOLTIP

maityayan1996 — Wed, 28 Oct 2020 14:50:03 GMT

Hi you can use this kind of JS file to use as a tooltip.

<dashboard script="tooltipnew.js,new.js,tooltipnew2.js,new2.js">
<label>table tooltip</label>
<row>
<panel>
<table id="tblTooltip">
<search>
<query>index=_internal sourcetype=splunkd_ui_access |bin span=1d _time |stats count max(bytes) as bytes by method _time |eval reference=count."|".bytes |eval new=method."|".count |fields _time reference new</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">20</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
<panel>
<table id="tblTooltip2">
<search>
<query>index=_internal sourcetype=splunkd_ui_access |bin span=1d _time |stats count max(bytes) as bytes by method _time |eval reference2=count."|".bytes |eval new2=method."|".count |fields _time reference2 new2</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">20</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
</row>
</dashboard>

_--------------------------------

new.js

-----

require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {

var CustomTooltipRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
return cell.field === 'new';

},
render: function($td, cell) {
var message = cell.value.split("|")[0];
var tip = cell.value.split("|")[1];

$td.html(_.template('<a href="#" data-toggle="tooltip" data-placement="right" title="<%- tip%>"><%- message%></a>', {
tip: tip,
message: message
}));

// This line wires up the Bootstrap tooltip to the cell markup
$td.children('[data-toggle="tooltip"]').tooltip();
}
});

mvc.Components.get('tblTooltip').getVisualization(function(tableView) {

// Register custom cell renderer
tableView.table.addCellRenderer(new CustomTooltipRenderer());

// Force the table to re-render
tableView.table.render();
});

});

-------

new2.js

-------

require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {

var CustomTooltipRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
return cell.field === 'new2';

},
render: function($td, cell) {
var message = cell.value.split("|")[0];
var tip = cell.value.split("|")[1];

$td.html(_.template('<a href="#" data-toggle="tooltip" data-placement="right" title="<%- tip%>"><%- message%></a>', {
tip: tip,
message: message
}));

// This line wires up the Bootstrap tooltip to the cell markup
$td.children('[data-toggle="tooltip"]').tooltip();
}
});

mvc.Components.get('tblTooltip2').getVisualization(function(tableView) {

// Register custom cell renderer
tableView.table.addCellRenderer(new CustomTooltipRenderer());

// Force the table to re-render
tableView.table.render();
});

});

-------------

tooltipnew.js

------

require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {

var CustomTooltipRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
return cell.field === 'reference';

},
render: function($td, cell) {
var message = cell.value.split("|")[0];
var tip = cell.value.split("|")[1];

$td.html(_.template('<a href="#" data-toggle="tooltip" data-placement="right" title="<%- tip%>"><%- message%></a>', {
tip: tip,
message: message
}));

// This line wires up the Bootstrap tooltip to the cell markup
$td.children('[data-toggle="tooltip"]').tooltip();
}
});

mvc.Components.get('tblTooltip').getVisualization(function(tableView) {

// Register custom cell renderer
tableView.table.addCellRenderer(new CustomTooltipRenderer());

// Force the table to re-render
tableView.table.render();
});

});

---------

tooltipnew2.js

--------

require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {

var CustomTooltipRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
return cell.field === 'reference2';

},
render: function($td, cell) {
var message = cell.value.split("|")[0];
var tip = cell.value.split("|")[1];

$td.html(_.template('<a href="#" data-toggle="tooltip" data-placement="right" title="<%- tip%>"><%- message%></a>', {
tip: tip,
message: message
}));

// This line wires up the Bootstrap tooltip to the cell markup
$td.children('[data-toggle="tooltip"]').tooltip();
}
});

mvc.Components.get('tblTooltip2').getVisualization(function(tableView) {

// Register custom cell renderer
tableView.table.addCellRenderer(new CustomTooltipRenderer());

// Force the table to re-render
tableView.table.render();
});

});

--------

Re: Dashboard TOOLTIP

Eldenhanjoel — Tue, 03 Nov 2020 05:23:39 GMT

<row depends="$hidden$">
<panel>
<html>
<style>

.input-link {
min-width: 1200px !important;
width: 1200px !important;
max-width: 1200px !important;
}

#ab_table table tr td{
color: black !important;}

#ab_table table tr td:nth-child(1){
color: green !important;
font-weight: bold !important
}

#ab_table table tr td:nth-child(2){
color: skyblue !important;
text-decoration: underline !important;
font-weight: bold !important
}

#ab_table table tr td:nth-child(n+3):nth-child(-n+13){
color: green !important;
text-decoration: underline !important;
font-weight: bold !important
}

#b2b_table table tr td{
color: black !important;}

#b2b_table table tr td:nth-child(1){
color: green !important;
font-weight: bold !important
}

#b2b_table table tr td:nth-child(2){
color: skyblue !important;
text-decoration: underline !important;
font-weight: bold !important
}

#b2b_table table tr td:nth-child(n+3):nth-child(-n+6){
color: green !important;
text-decoration: underline !important;
font-weight: bold !important
}

#b2b_table table tr td:nth-child(7){
color: green !important;
font-weight: bold !important
}

#wl_table table tr td{
color: black !important;}

#wl_table table tr td:nth-child(1){
color: green !important;
font-weight: bold !important
}

#wl_table table tr td:nth-child(2){
color: skyblue !important;
text-decoration: underline !important;
font-weight: bold !important
}

#wl_table table tr td:nth-child(n+3):nth-child(-n+10){
color: green !important;
text-decoration: underline !important;
font-weight: bold !important
}

#fe_table table tr td{
color: black !important;}

#fe_table table tr td:nth-child(1){
color: green !important;
font-weight: bold !important
}

#fe_table table tr td:nth-child(3){
color: skyblue !important;
text-decoration: underline !important;
font-weight: bold !important
}

#fe_table table tr td:nth-child(n+8):nth-child(-n+11){
color: green !important;
text-decoration: underline !important;
font-weight: bold !important
}

#al_table table tr td{
color: black !important;}

#al_table table tr td:nth-child(3){
color: skyblue !important;
text-decoration: underline !important;
font-weight: bold !important
}

#al_table table tr td:nth-child(1){
color: green !important;
font-weight: bold !important
}

#al_table table tr td:nth-child(n+8):nth-child(-n+9){
color: green !important;
text-decoration: underline !important;
font-weight: bold !important
}

#al_table table tr td:nth-child(n+11):nth-child(-n+12){
color: green !important;
text-decoration: underline !important;
font-weight: bold !important
}

#al_table table tr td:nth-child(15){
color: green !important;
text-decoration: underline !important;
font-weight: bold !important
}

#al_table table tr td:nth-child(17){
color: green !important;
text-decoration: underline !important;
font-weight: bold !important
}

</style>
</html>
</panel>
</row>

Re: Dashboard TOOLTIP

splunk_user_maj — Wed, 04 Nov 2020 04:39:15 GMT

Re: Dashboard TOOLTIP

splunk_user_maj — Wed, 04 Nov 2020 04:40:02 GMT

<row>
<panel>
<html>
<style>
#tblTooltip a:hover {
color: green !important;
font-weight: bold !important
}
</style>
</html>
</panel>
</row>
<row>
<panel>
<html>
<style>
#tblTooltip a {
color: green !important;
font-weight: bold !important
}
</style>
</html>
</panel>
</row>
<row>

Re: Dashboard TOOLTIP

splunk_user_maj — Thu, 05 Nov 2020 14:53:50 GMT

require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {

var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Enable this custom cell renderer for NETWORK field
return _(["NETWORK"]).contains(cell.field);
},
render: function($td, cell) {
// Add a class to the cell based on the returned value
var value = cell.value;

// Apply interpretation for NETWORK field
// Since we have picked only one row for applying range Class, following if is not required.
if (cell.field === "NETWORK") {
//Add range class based on cell values.
if (value == "OK") {
$td.addClass("range-cell").addClass("range-green");
}
if (value == "NOT OK" ) {
$td.addClass("range-cell").addClass("range-red");
}

}

// Update the cell content with string value
$td.text(value).addClass('string');
}
});

mvc.Components.get('tblTooltip').getVisualization(function(tableView) {

tableView.on('rendered', function() {
// Add a delay to ensure Custom Render applies to row without getting overridden with built in reder.
setTimeout(function(){
// Apply class of the cells to the parent row in order to color the whole row
tableView.$el.find('td.range-cell').each(function() {
$(this).parents('tr').addClass(this.className);
$(this).parents('tr').addClass(this.className);
});
},100);
});

// Add custom cell renderer, the table will re-render automatically.
tableView.addCellRenderer(new CustomRangeRenderer());
});
});

Re: Dashboard TOOLTIP

splunk_user_maj — Thu, 05 Nov 2020 14:54:37 GMT

/* Row Coloring */

#tblTooltip tr td.range-green{
color: green !important;
}

#tblTooltip tr td.range-red{
color: red !important;
}