Following is the answer to add a Static or Dynamic Tooltip Text to Panels on mousehover.
Step 1: Add id attribute for the panel which requires Tooltip on hover.
<panel id="panel1">
Step 2: Add <html> panel to the panel. The html panel should also contain id to easily apply CSS for aligning the Tooltip text in Center of the panel. Any other approach for applying CSS Tooltip can also be adopted. However, make sure that Splunk's default Tooltip style should not be overridden.
Add depends section for showing or hiding the Tooltip via a token which will be set/unset later via JavaScript. PS: rejects can be used in place of depends to test out CSS Style and to test whether the Tooltip position and text is as expected or not.
Add the HTML code with classes for Tooltip. This is based on Splunk's Bootstrap example provided in style_guide.html
<html id="htmlToolTip1" depends="$tokToolTipShow1$">
<!-- Style for Tooltip Text for center alignment with panel -->
<style>
#htmlToolTip1{
margin:auto !important;
width: 20% !important;
}
</style>
<div class="tooltip fade top in">
<div class="tooltip-arrow"/>
<div class="tooltip-inner">$tokToolTipText1$</div>
</div>
</html>
Step 3: Set Tooltip Text Token (tokToolTipText1) (Static or Dynamic). PS: this is different than Show Tooltip Text token (tokToolTipShow1)
Ideal place to declare Static Tooltip Text token is <init> tag in Splunk Dashboard (in version 6.5 onward)
<init>
<set token="tokToolTipText1">Tooltip1 Text Goes Here</set>
</init>
Dynamic Token can be set via Splunk Event Handlers or Environment tokens. Search event handler has been used to set Tooltip text token tokToolTipText1 in the following example:
<table>
<search>
<query>index=_internal sourcetype=*
| chart count sparkline(count, 1h) as trend by sourcetype
| sort -count
| head 5</query>
<earliest>$tokTime.earliest$</earliest>
<latest>$tokTime.latest$</latest>
<done>
<set token="tokToolTipText1">Tooltip1: Search returned $job.resultCount$ Results!</set>
</done>
</search>
<option name="drilldown">none</option>
</table>
Step 4: Wire in jQuery based JavaScript panel_tooltip.js to handle mouseover() and mouseout() event handlers for Panel based on Panel ID given in Step 1
require([
"splunkjs/mvc",
"splunkjs/mvc/tokenutils",
"jquery",
"splunkjs/mvc/searchmanager",
"splunkjs/ready!",
"splunkjs/mvc/simplexml/ready!"
],
function(
mvc,
TokenUtils,
$,
SearchManager
) {
//jQuery to access Panel with ID and use mvc.Components.get() function to get all Submitted Tokens.
//On mouseover() event set the show token for the Tooltip
$('#panel1').on("mouseover",function(){
var tokens = mvc.Components.get("submitted");
tokens.set("tokToolTipShow1", "true");
});
//On mouseout() event unset the show token for the Tooltip to hide the same.
$('#panel1').on("mouseout",function(){
var tokens = mvc.Components.get("submitted");
tokens.unset("tokToolTipShow1");
});
}
);
Step 5: Place panel_tooltip.js file in the Splunk App's appserver\static folder. Depending on the Splunk Installation path and your Splunk app name the static folder might be located under the following path.
$SPLUNK_HOME\etc\app\<YourAppName>\appserver\static
Step 6: Add panel_tooltip.js JavaScript to the dashboard and refresh/bump or restart Splunk. This may require clearing browser history as well.
<dashboard script="panel_tooltip.js"> OR <form script="panel_tooltip.js">
Same is also available on my Splunk Wiki Talk link: http://wiki.splunk.com/User_talk:Niketnilay#Topic_12:_Show_Tooltip_Text_on_hovering_over_Panel_.28St...
Following is the answer to add a Static or Dynamic Tooltip Text to Panels on mousehover.
Step 1: Add id attribute for the panel which requires Tooltip on hover.
<panel id="panel1">
Step 2: Add <html> panel to the panel. The html panel should also contain id to easily apply CSS for aligning the Tooltip text in Center of the panel. Any other approach for applying CSS Tooltip can also be adopted. However, make sure that Splunk's default Tooltip style should not be overridden.
Add depends section for showing or hiding the Tooltip via a token which will be set/unset later via JavaScript. PS: rejects can be used in place of depends to test out CSS Style and to test whether the Tooltip position and text is as expected or not.
Add the HTML code with classes for Tooltip. This is based on Splunk's Bootstrap example provided in style_guide.html
<html id="htmlToolTip1" depends="$tokToolTipShow1$">
<!-- Style for Tooltip Text for center alignment with panel -->
<style>
#htmlToolTip1{
margin:auto !important;
width: 20% !important;
}
</style>
<div class="tooltip fade top in">
<div class="tooltip-arrow"/>
<div class="tooltip-inner">$tokToolTipText1$</div>
</div>
</html>
Step 3: Set Tooltip Text Token (tokToolTipText1) (Static or Dynamic). PS: this is different than Show Tooltip Text token (tokToolTipShow1)
Ideal place to declare Static Tooltip Text token is <init> tag in Splunk Dashboard (in version 6.5 onward)
<init>
<set token="tokToolTipText1">Tooltip1 Text Goes Here</set>
</init>
Dynamic Token can be set via Splunk Event Handlers or Environment tokens. Search event handler has been used to set Tooltip text token tokToolTipText1 in the following example:
<table>
<search>
<query>index=_internal sourcetype=*
| chart count sparkline(count, 1h) as trend by sourcetype
| sort -count
| head 5</query>
<earliest>$tokTime.earliest$</earliest>
<latest>$tokTime.latest$</latest>
<done>
<set token="tokToolTipText1">Tooltip1: Search returned $job.resultCount$ Results!</set>
</done>
</search>
<option name="drilldown">none</option>
</table>
Step 4: Wire in jQuery based JavaScript panel_tooltip.js to handle mouseover() and mouseout() event handlers for Panel based on Panel ID given in Step 1
require([
"splunkjs/mvc",
"splunkjs/mvc/tokenutils",
"jquery",
"splunkjs/mvc/searchmanager",
"splunkjs/ready!",
"splunkjs/mvc/simplexml/ready!"
],
function(
mvc,
TokenUtils,
$,
SearchManager
) {
//jQuery to access Panel with ID and use mvc.Components.get() function to get all Submitted Tokens.
//On mouseover() event set the show token for the Tooltip
$('#panel1').on("mouseover",function(){
var tokens = mvc.Components.get("submitted");
tokens.set("tokToolTipShow1", "true");
});
//On mouseout() event unset the show token for the Tooltip to hide the same.
$('#panel1').on("mouseout",function(){
var tokens = mvc.Components.get("submitted");
tokens.unset("tokToolTipShow1");
});
}
);
Step 5: Place panel_tooltip.js file in the Splunk App's appserver\static folder. Depending on the Splunk Installation path and your Splunk app name the static folder might be located under the following path.
$SPLUNK_HOME\etc\app\<YourAppName>\appserver\static
Step 6: Add panel_tooltip.js JavaScript to the dashboard and refresh/bump or restart Splunk. This may require clearing browser history as well.
<dashboard script="panel_tooltip.js"> OR <form script="panel_tooltip.js">
Same is also available on my Splunk Wiki Talk link: http://wiki.splunk.com/User_talk:Niketnilay#Topic_12:_Show_Tooltip_Text_on_hovering_over_Panel_.28St...
