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

[niks987]

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 🙂

.custom-tooltip{
display: inline;
position: absolute;
}
.custom-tooltip:hover:after{
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;

[jitendragupta]

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