Dashboard TOOLTIP

[Eldenhanjoel]

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

[maityayan1996 · Accepted solution]

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

});

--------

[Eldenhanjoel]

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

[richgalloway]

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? 

[splunk_user_maj]

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

[splunk_user_maj]

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

[splunk_user_maj]

/* Row Coloring */

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

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