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# 
Manager :
#MGR#">#ENAME#</span>
l
“Department : #DEPT# 
Manager :
#MGR#”
this will be displayed while hovering on to the employee name and “
”
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