TOOL-TIP FOR THE REPORT COLUMN

The tool-tip displaying
report column while hovering on the another report column.



STEP
1:
l  
ENAME, DEPARTMENT and MANAGER  is the report Column.
l  
Make the ENAME column’s display type as
“Display As Text”. DEPARTMENT and MANAGER column’s display
type as hidden.
l   In Column
Formatting
, apply this Html code in the HTML Expression
        
        <span
data-tooltip=”Department : #DEPT# &#xa;Manager :
#MGR#”>#ENAME#</span>

l  
“Department : #DEPT# &#xa;Manager :
#MGR#”

this will be displayed while hovering on to the employee name and “&#xa”
this is used to display text in the new line.



STEP
2:
l  
 Click
on the edit page icon
l  
 Go to
css

l  
 Apply
this code in the inline Region



 /* Add this attribute to the element that
needs a tooltip */
[data-tooltip]
{
  position: relative;
  display: inline-block;
}
/*
Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after
{
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
/*
Position tooltip above the element */
[data-tooltip]:before
{
  position: absolute;
  padding: 10px;
  width: 160px;
  top:100%;
  left:100%;
  border-radius: 10px;
  background-color: #000;
  color: #fff;
  content: attr(data-tooltip);
  
   
}
/*
Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after
{
  visibility: visible;
  z-index: 999;
  white-space:pre-wrap;
  opacity: 1;
}
.t-Body-nav
{
      overflow: hidden;

}


By 
Angel M
  • January 17, 2017 | 25 views