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!

Take the 2021 Splunk Career Survey for $50 in Amazon Cash

Help us learn about how Splunk has impacted your career by taking the 2021 Splunk Career Survey. Last year’s ...

Using Machine Learning for Hunting Security Threats

WATCH NOW Seeing the exponential hike in global cyber threat spectrum, organizations are now striving more for ...

Observability Newsletter Highlights | March 2023

 March 2023 | Check out the latest and greatestSplunk APM's New Tag Filter ExperienceSplunk APM has updated ...