Dashboards & Visualizations

How to add mouse hover to display the details in the dashboard panel?


Hi All,

Hope you are doing good.

I wanted to a add a mouse hover option for different panels which will display the details for the panel.
I have used the below code to add a mouse hover which adds an extra text "Details" and hovering over it we can get the details. But i want to that when a user hovers over the panel title than the details should be displayed also i want to use css and js within the XML as i have some credential issues for the servers.

Thanks for your help 🙂

display: inline;
position: absolute;
background: #333 ;
background: rgba(0,0,0,.8) ;
border-radius: 5px ;
bottom: 26px ;
color: #fff ;
content: attr(title) ;
left: 20% ;
padding: 5px 15px ;
position: absolute ;
z-index: 98;
width: 220px;

0 Karma

Path Finder

You can accomplish this easily if you convert it to HTML dashboard. The same way I am displaying Percent Speed in my dashboard using the title tag. This formula comes as a tooltip when u hover on the panel. No need for CSS and js. Please check code.

 <div id="panel1" class="dashboard-cell" style="width: 25%" title="Percent Speed=TPH (C6) / ROM">
                       <div class="dashboard-panel clearfix">
                               <h4 class="panel-title" style=" color:white;text-align: center;" >Plant Optimal Factor</h4>
                                    <div class="panel-element-row">
                                           <div id="element1" class="dashboard-element single" style="width: 100%">
                                                   <div class="panel-body"></div>
0 Karma
Get Updates on the Splunk Community!

.conf24 | Day 0

Hello Splunk Community! My name is Chris, and I'm based in Canberra, Australia's capital, and I travelled for ...

Enhance Security Visibility with Splunk Enterprise Security 7.1 through Threat ...

(view in My Videos)Struggling with alert fatigue, lack of context, and prioritization around security ...

Troubleshooting the OpenTelemetry Collector

  In this tech talk, you’ll learn how to troubleshoot the OpenTelemetry collector - from checking the ...